import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import {
    BarChart3,
    Blocks,
    CalendarDays,
    FileImage,
    FilePenLine,
    FileText,
    Globe,
    Images,
    LayoutGrid,
    Menu,
    Newspaper,
    ShieldCheck,
    Upload,
    Users,
} from '@/lib/icons';
import AppLogo from './app-logo';
const contentNavItems: NavItem[] = [
    { title: 'Pages', url: '/dashboard/cms/pages', icon: FileText },
    { title: 'Page Content', url: '/dashboard/cms/page-content', icon: FilePenLine },
    { title: 'Hero Slides', url: '/dashboard/cms/hero-slides', icon: FileImage },
    { title: 'Blocks', url: '/dashboard/cms/blocks', icon: Blocks },
    { title: 'Menus', url: '/dashboard/cms/menus', icon: Menu },
    { title: 'Media', url: '/dashboard/cms/media', icon: Upload },
    { title: 'News', url: '/dashboard/cms/news', icon: Newspaper },
    { title: 'Branding', url: '/dashboard/cms/branding', icon: Images },
    { title: 'Gallery', url: '/dashboard/cms/gallery', icon: Images },
    { title: 'Staff', url: '/dashboard/cms/staff', icon: Users },
    { title: 'Events', url: '/dashboard/cms/events', icon: CalendarDays },
];
const systemNavItems: NavItem[] = [
    { title: 'Roles', url: '/dashboard/cms/roles', icon: ShieldCheck },
    { title: 'Analytics', url: '/dashboard/cms/analytics', icon: BarChart3 },
];
const footerNavItems: NavItem[] = [{ title: 'View Website', url: '/', icon: Globe }];
export function AppSidebar() {
    return (
        <Sidebar collapsible="icon" variant="inset">
            {' '}
            <SidebarHeader>
                {' '}
                <SidebarMenu>
                    {' '}
                    <SidebarMenuItem>
                        {' '}
                        <SidebarMenuButton size="lg" asChild>
                            <Link href="/dashboard" prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>{' '}
                </SidebarMenu>{' '}
            </SidebarHeader>{' '}
            <SidebarContent>
                {' '}
                <NavMain items={[{ title: 'Dashboard', url: '/dashboard', icon: LayoutGrid }]} />{' '}
                <SidebarGroup className="px-2 py-0">
                    {' '}
                    <SidebarGroupLabel>Content</SidebarGroupLabel>{' '}
                    <SidebarMenu>
                        {' '}
                        {contentNavItems.map((item) => {
                            const page = (window as any).__inertia_page_url;
                            return (
                                <SidebarMenuItem key={item.title}>
                                    {' '}
                                    <SidebarMenuButton asChild isActive={typeof window !== 'undefined' && item.url === window.location.pathname}>
                                        <Link href={item.url} prefetch>
                                            {item.icon && <item.icon />}
                                            <span>{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            );
                        })}{' '}
                    </SidebarMenu>{' '}
                </SidebarGroup>{' '}
                <SidebarGroup className="px-2 py-0">
                    {' '}
                    <SidebarGroupLabel>System</SidebarGroupLabel>{' '}
                    <SidebarMenu>
                        {' '}
                        {systemNavItems.map((item) => (
                            <SidebarMenuItem key={item.title}>
                                {' '}
                                <SidebarMenuButton asChild isActive={typeof window !== 'undefined' && item.url === window.location.pathname}>
                                    <Link href={item.url} prefetch>
                                        {item.icon && <item.icon />}
                                        <span>{item.title}</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        ))}
                    </SidebarMenu>
                </SidebarGroup>
            </SidebarContent>
            <SidebarFooter>
                {' '}
                <NavFooter items={footerNavItems} className="mt-auto" /> <NavUser />{' '}
            </SidebarFooter>{' '}
        </Sidebar>
    );
}