import AppLogo from '@/components/app-logo';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, useSidebar } from '@/components/ui/sidebar';
import { usePersonalizer } from '@/hooks/usePersonalizer';
import { dashboard } from '@/routes';
import { Link, usePage } from '@inertiajs/react';
import * as React from 'react';
import { appMenuItems } from './menuItems/menuLists/application-menu-items';
import { ContactMenuItems } from './menuItems/menuLists/ContactMenuItems';
import { erpMenuItems } from './menuItems/menuLists/erpMenuItems';
import { platformMenuItems, otherMenuItems } from './menuItems/menuLists/generalMenuItems';
import { toolsMenuItems } from './menuItems/menuLists/ToolsMenuItems';
import { InventoryMenuItems } from './menuItems/menuLists/InventoryMenuItems';
import { paymentMenuItems } from './menuItems/menuLists/payment';
import { UsersMenuItems } from './menuItems/menuLists/UsersMenuItems';
import { NavErp } from './menuItems/modules/NavErp';
import { NavGeneral } from './menuItems/modules/NavGeneral';
import { NavUser } from './nav-user';

export function AppSidebar() {
    const pageProps = usePage().props as any;
    const { modules, enabled_app_modules, company_settings, current_user_roles, auth } = pageProps;
    const applications = enabled_app_modules?.applications || { apps: {}, modules: {} };
    const tools = enabled_app_modules?.tools || { apps: {}, modules: {} };
    const { settings } = usePersonalizer();
    const [openCollapsible, setOpenCollapsible] = React.useState<string | null>(null);

    function getModuleByName(moduleName: string) {
        return modules?.find((m: any) => m.name === moduleName) || null;
    }
    const { state } = useSidebar(); const showErpModule = false;
    getModuleByName('Productivity');
    getModuleByName('Communication');

    const collapsedIconSrc = (company_settings?.company_icon_url as string | null)
        || (company_settings?.company_logo_url as string | null)
        || settings.branding.default_icon
        || settings.branding.default_logo
        || pageProps.assets.logo_svg;

    return (
        <Sidebar collapsible="icon" variant="inset" className="border-r p-0">
            {/* Mobile Logo Header */}
            {state != 'expanded' ? (
                <div className="bg-sidebar-dark">
                    <div className="mx-auto my-4 ml-2 flex h-9 w-9">
                        <img
                            src={collapsedIconSrc}
                            alt="Logo"
                            className="h-full w-full"
                            onError={(e) => { (e.target as HTMLImageElement).src = pageProps.assets.logo_svg; }}
                        />
                    </div>
                </div>
            ) : (
                <SidebarHeader className="block bg-sidebar-dark py-4">
                    <div>
                        <Link href={dashboard()} prefetch>
                            <AppLogo />
                        </Link>
                    </div>
                </SidebarHeader>
            )}

            <SidebarContent
                className="h-screen overflow-y-auto bg-sidebar-dark py-2 font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                style={{
                    scrollbarWidth: 'none' /* Firefox */,
                    msOverflowStyle: 'none' /* Internet Explorer 10+ */,
                }}
            >
                {/* Main Navigation */}
                <NavGeneral
                    items={platformMenuItems(current_user_roles || [])}
                    groupLabel="Platform"
                    openCollapsible={openCollapsible}
                    onOpenCollapsibleChange={setOpenCollapsible}
                />
                {(() => {
                    const appItems = appMenuItems(applications);
                    return appItems.length > 0 ? (
                        <NavGeneral
                            items={appItems}
                            groupLabel="Applications"
                            openCollapsible={openCollapsible}
                            onOpenCollapsibleChange={setOpenCollapsible}
                        />
                    ) : null;
                })()}

                {(() => {
                    const toolItems = toolsMenuItems(tools);
                    return toolItems.length > 0 ? (
                        <NavGeneral
                            items={toolItems}
                            groupLabel="Tools"
                            openCollapsible={openCollapsible}
                            onOpenCollapsibleChange={setOpenCollapsible}
                        />
                    ) : null;
                })()}
                <div className="my-auto">
                    <NavGeneral
                        items={otherMenuItems(current_user_roles || [])}
                        groupLabel="Administration"
                        openCollapsible={openCollapsible}
                        onOpenCollapsibleChange={setOpenCollapsible}
                    />
                </div>
                {/*<div className="my-auto">*/}
                {/*    <NavGeneral items={paymentMenuItems(current_user_roles || [])} groupLabel="Payment" />*/}
                {/*</div>*/}
            </SidebarContent>

            <SidebarFooter className="">
                {/* <div className="mb-2"></div> */}
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}