import { m } from '@paraglide/messages';
import {
  CarrotIcon,
  CircuitryIcon,
  GaugeIcon,
  GearIcon,
  HouseIcon,
  PackageIcon,
  UsersIcon,
  WarehouseIcon,
} from '@phosphor-icons/react';
import { createLink } from '@tanstack/react-router';
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@ui/sidebar';
import React from 'react';
import AdminShow from '../auth/AdminShow';
import AuthShow from '../auth/AuthShow';

const SidebarMenuButtonLink = createLink(SidebarMenuButton);

const NAV_MAIN = [
  {
    id: '1',
    title: m.nav_label_basic(),
    isAuth: false,
    admin: false,
    items: [
      {
        title: m.nav_home(),
        path: '/',
        icon: HouseIcon,
      },
    ],
  },
  {
    id: '2',
    title: m.nav_label_management(),
    isAuth: true,
    admin: false,
    items: [
      {
        title: m.nav_dashboard(),
        path: '/management/dashboard',
        icon: GaugeIcon,
      },
      {
        title: m.nav_houses(),
        path: '/management/houses',
        icon: WarehouseIcon,
      },
    ],
  },
  {
    id: '3',
    title: m.nav_label_kanri(),
    isAuth: true,
    admin: true,
    items: [
      {
        title: m.nav_users(),
        path: '/kanri/users',
        icon: UsersIcon,
      },
      {
        title: m.nav_houses(),
        path: '/kanri/houses',
        icon: WarehouseIcon,
      },
      {
        title: m.nav_boxes(),
        path: '/kanri/boxes',
        icon: PackageIcon,
      },
      {
        title: m.nav_items(),
        path: '/kanri/items',
        icon: CarrotIcon,
      },
      {
        title: m.nav_logs(),
        path: '/kanri/logs',
        icon: CircuitryIcon,
      },
      {
        title: m.nav_settings(),
        path: '/kanri/settings',
        icon: GearIcon,
      },
    ],
  },
];

function EmptyComponent({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

const NavMain = () => {
  return (
    <>
      {NAV_MAIN.map((nav) => {
        const { isAuth, admin } = nav;
        const Component = admin
          ? AdminShow
          : isAuth
            ? AuthShow
            : EmptyComponent;

        return (
          <Component key={nav.id}>
            <SidebarGroup className="overflow-hidden">
              <SidebarGroupLabel>{nav.title}</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {nav.items.map((item) => {
                    const Icon = item.icon;
                    return (
                      <SidebarMenuItem key={item.path}>
                        <SidebarMenuButtonLink
                          type="button"
                          to={item.path}
                          className="cursor-pointer hover:bg-primary/80 hover:text-white"
                          tooltip={`${nav.title} - ${item.title}`}
                          activeProps={{
                            className: 'bg-primary text-white',
                          }}
                        >
                          <Icon size={24} />
                          {item.title}
                        </SidebarMenuButtonLink>
                      </SidebarMenuItem>
                    );
                  })}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </Component>
        );
      })}
    </>
  );
};

export default NavMain;
