import { NavMain } from '@/components/layout/nav-main';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenuButton,
} from '@/components/ui/sidebar';
import { userNavFooter, userNavItems } from '@/config/user-navigation';
import { useTransactionStatus } from '@/hooks/use-transaction-status';
import { logout } from '@/routes';
import { NavGroup } from '@/types';
import { Link } from '@inertiajs/react';
import { SignOutIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { AppLogo } from '../app-logo';

const HIDDEN_WHEN_DEPOSITS_OFF = new Set(['deposit']);
const HIDDEN_WHEN_WITHDRAWALS_OFF = new Set(['withdraw']);

// TODO: Delete
export function DefaultSidebar() {
  const { t } = useTranslation();
  const { depositsEnabled, withdrawalsEnabled } = useTransactionStatus();

  const filteredNav: NavGroup[] = userNavItems
    .map((group) => ({
      ...group,
      items: group.items.filter((item) => {
        if (!depositsEnabled && HIDDEN_WHEN_DEPOSITS_OFF.has(item.id))
          return false;
        if (!withdrawalsEnabled && HIDDEN_WHEN_WITHDRAWALS_OFF.has(item.id))
          return false;
        return true;
      }),
    }))
    .filter((group) => group.items.length > 0);

  return (
    <Sidebar
      collapsible="icon"
      variant="sidebar"
      className="px-4 backdrop-blur-2xl"
    >
      <SidebarHeader className="border-b border-white/5">
        <Link href="/" prefetch>
          <AppLogo />
        </Link>
      </SidebarHeader>

      <SidebarContent className="no-scrollbar">
        <NavMain
          items={filteredNav}
          variant="default"
          className="border-b border-white/5 last:border-transparent"
        />
      </SidebarContent>

      <SidebarFooter className="py-4">
        <NavMain items={userNavFooter} variant="default" className="p-0" />
        <SidebarMenuButton
          asChild
          tooltip={{ children: t('Logout') }}
          className="cursor-pointer hover:bg-[radial-gradient(50%_50%_at_50%_50%,#FF747C_0%,#B6252D_100%)] hover:shadow-destructive"
        >
          <Link href={logout()} prefetch className="flex items-center gap-2">
            <div>
              <SignOutIcon className="size-[18px]" weight="bold" />
            </div>
            <span data-slot="label">{t('Logout')}</span>
          </Link>
        </SidebarMenuButton>
      </SidebarFooter>
    </Sidebar>
  );
}