import { AnnouncementAddOnSidebar } from '@/components/addOns/addon-sidebars/announcements/announcements-sidebar';
import { ChatAddOnSidebar } from '@/components/addOns/addon-sidebars/chats/chats-sidebar';
import ContactAddOnSidebar from '@/components/addOns/addon-sidebars/contacts/contacts-sidebar';
import EmailAddOnSidebar from '@/components/addOns/addon-sidebars/emails/emails-sidebar';
import { EventAddOnSidebar } from '@/components/addOns/addon-sidebars/events/events-sidebar';
import NoteAddOnSidebar from '@/components/addOns/addon-sidebars/notes/notes-sidebar';
import ReminderSidebar from '@/components/addOns/addon-sidebars/reminders/reminders-sidebar';
import { TaskAddOnSidebar } from '@/components/addOns/addon-sidebars/tasks/tasks-sidebar';
import { Separator } from '@/components/ui/separator';
import { useAddOn } from '@/hooks/use-addons';
import { useState } from 'react';

interface AddOn {
    id: string;
    name: string;
    // path under public - served as /assets/addOn/<file>
    iconPath?: string;
    description: string;
    color: string;
    content: React.ReactNode;
}

const addOns: AddOn[] = [
    {
        id: 'tasks',
        name: 'Tasks',
        iconPath: '/assets/addOn/gsheet.svg',
        description: 'Manage tasks and projects',
        color: '#06923E',
        content: <TaskAddOnSidebar />,
    },
    {
        id: 'reminders',
        name: 'Reminders',
        color: '#FAB12F',
        iconPath: '/assets/addOn/notification.svg',
        description: 'Manage reminders and alerts',

        content: <ReminderSidebar />,
    },
    {
        id: 'notes',
        name: 'Notes',
        iconPath: '/assets/addOn/note.svg',
        description: 'Manage notes and documents',

        color: '#9112BC',
        content: <NoteAddOnSidebar />,
    },
    {
        id: 'calendar',
        name: 'Calendar',
        iconPath: '/assets/addOn/calendar.svg',
        description: 'Manage events and schedules',
        color: '#3B82F6',
        content: <EventAddOnSidebar />,
    },

    {
        id: 'contacts',
        name: 'Contacts',
        iconPath: '/assets/addOn/contact.svg',
        description: 'Manage your contacts',
        color: '#3B82F6',
        content: <ContactAddOnSidebar />,
    },
    {
        id: 'live-chat',
        name: 'Live Chat',
        iconPath: '/assets/addOn/chat.svg',
        description: 'Manage live chat interactions',
        color: '#3B82F6',
        content: <ChatAddOnSidebar />,
    },
    {
        id: 'email',
        name: 'Email',
        iconPath: '/assets/addOn/email.svg',
        description: 'Manage your emails',
        color: '#3B82F6',
        content: <EmailAddOnSidebar />,
    },

    {
        id: 'announcements',
        name: 'Announcements',
        iconPath: '/assets/addOn/announce.svg',
        description: 'Manage alerts and updates',
        color: '#DC8BE0',
        content: <AnnouncementAddOnSidebar />,
    },
];

const AddOnSidebar = () => {
    const { addOnOpen, addOnClose, activeAddOn } = useAddOn();
    const [activeAddOnIndex, setActiveAddOnIndex] = useState<number | null>(null);

    return (
        <div className="flex h-full flex-col gap-6">
            {addOns.map((addOn, idx) => {
                const isActive = activeAddOn?.id === addOn.id;

                return (
                    <div key={idx} className="">
                        <div
                            className="size-8 cursor-pointer rounded-lg p-1"
                            onClick={() => {
                                activeAddOn?.id === addOn.id
                                    ? addOnClose()
                                    : addOnOpen({
                                          id: addOn.id,
                                          name: addOn.name,
                                          content: (
                                              <div className="flex h-full flex-col">
                                                  <div className="no-scrollbar flex-1 overflow-y-auto">{addOn.content}</div>
                                              </div>
                                          ),
                                      });
                                setActiveAddOnIndex(addOn.id === activeAddOn?.id ? null : idx);
                            }}
                        >
                            {addOn.iconPath ? (
                                <div
                                    title={addOn.name}
                                    className={`size-8 rounded-lg ${isActive ? 'border-2' : ''}`}
                                    style={isActive ? { borderColor: addOn.color } : undefined}
                                >
                                    <img src={addOn.iconPath} alt={`${addOn.name} icon`} className="h-full w-full" />
                                </div>
                            ) : null}
                        </div>

                        {addOn.id === 'calendar' ? (
                            <div className="flex h-full items-center">
                                <Separator className="mx-1 my-auto" />
                            </div>
                        ) : null}
                        {addOn.id === 'contacts' ? (
                            <div className="flex h-full items-center">
                                <Separator className="mx-1 my-auto" />
                            </div>
                        ) : null}
                    </div>
                );
            })}
            <div className="mt-auto mb-20 ml-1 md:mb-20">
                <div title="Marketplace" className={`mb-10 h-7 w-7 rounded-lg border border-black`}>
                    <img src="/assets/addOn/market.svg" alt="addon market" className="h-full w-full" />
                </div>
            </div>
        </div>
    );
};

export default AddOnSidebar;