import { CgScreen } from "react-icons/cg";
import { IoMdAdd } from "react-icons/io";
import { FaLayerGroup } from "react-icons/fa";
import { FaDatabase } from "react-icons/fa";
import { ScreenList } from "./screenList";
import { AddComponentMenu } from "./addComponentMenu";
import type { Dispatch, SetStateAction } from "react";
import { ComponentList } from "./componentList";
import { TableList } from "./tableList";
import type { ScreenActions, ScreenState } from "../../hooks/useScreen";
import type { ComponentActions, ComponentState } from "../../hooks/useComponent";
import type { TablesActions, TablesState } from "../../hooks/useTables";

interface SidebarProps {
    activeTabId: string
    screenState: ScreenState
    screenActions: ScreenActions
    componentState: ComponentState
    componentActions: ComponentActions
    tableState: TablesState
    tableActions: TablesActions
}

export function Sidebar({
    activeTabId,
    screenState,
    screenActions,
    componentState,
    componentActions,
    tableState,
    tableActions,
}: SidebarProps) {

    return (
        <div
            className={`bg-white border-r border-gray-200 flex-shrink-0 max-w-64
                transition-all duration-300 ease-in-out overflow-hidden ${activeTabId !== "" ? 'w-[20%] opacity-100' : 'w-0 opacity-0'}`}
        >
            <div className="w-full">
                {activeTabId === "screens" &&
                    <ScreenList
                        screenState={screenState}
                        screenActions={screenActions}
                        componentActions={componentActions}
                        tableState={tableState}
                        selectComponent={componentActions.selectComponent}
                    />
                }
                {activeTabId === "layer" &&
                    <ComponentList
                        components={componentState.curScreenComponents}
                        selectingComponentIndex={componentState.selectingComponentIndex}
                        selectComponent={componentActions.selectComponent}
                        resetSelectingComponent={componentActions.resetSelectingComponent}
                        deleteComponent={componentActions.deleteComponent}
                    />
                }
                {activeTabId === "components" &&
                    <AddComponentMenu
                        addComponent={componentActions.addComponent}
                    />
                }
                {activeTabId === "tables" &&
                    <TableList
                        tableState={tableState}
                        tableActions={tableActions}
                    />
                }
            </div>
        </div>
    )

}

export function SidebarIcons({
    activeTab,
    setActiveTab
}: {
    activeTab: string,
    setActiveTab: Dispatch<SetStateAction<string>>
}) {
    return (
        <div className="w-[50px] h-full bg-gray-800 flex flex-col items-center py-2 space-y-1">
            <IconButton
                id="screens"
                activeTab={activeTab}
                setActiveTab={setActiveTab}
            >
                <CgScreen size={20} />
            </IconButton>
            <IconButton
                id="layer"
                activeTab={activeTab}
                setActiveTab={setActiveTab}
            >
                <FaLayerGroup size={20} />
            </IconButton>
            <IconButton
                id="components"
                activeTab={activeTab}
                setActiveTab={setActiveTab}
            >
                <IoMdAdd size={20} />
            </IconButton>
            <IconButton
                id="tables"
                activeTab={activeTab}
                setActiveTab={setActiveTab}
            >
                <FaDatabase size={20} />
            </IconButton>
        </div>
    )
}


function IconButton({
    children,
    id,
    activeTab,
    setActiveTab
}: { children: React.ReactNode, id: string, activeTab: string, setActiveTab: Dispatch<SetStateAction<string>> }) {
    const handleTabClick = () => {
        if (activeTab === id) {
            setActiveTab("")
        } else {
            setActiveTab(id)
        }
    }

    return (
        <button
            onClick={handleTabClick}
            className={`w-10 h-10 flex items-center justify-center rounded-md transition-colors ${activeTab === id
                ? 'bg-blue-600 text-white'
                : 'text-gray-400 hover:text-white hover:bg-gray-700'
                }`}
        >
            {children}
        </button>
    )
}