'use client';
import LanguageSwitch from '@/components/language-switch';
import SvgIcon from '@/components/SvgIcon';
import { UserNav } from '@/components/user-nav';
import { navs } from '@/config/navs';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@workspace/airo-ui/components/sidebar';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const t = useTranslations('menu');
  const pathname = usePathname();
  const { toggleSidebar } = useSidebar();
  return (
    <Sidebar
      side='left'
      {...props}
      className={'border-0 bg-transparent pb-8 pt-4 shadow-none md:bg-white md:py-0 md:shadow-lg'}
    >
      <div
        className={
          'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white md:px-8'
        }
      >
        <div className={'absolute -right-3 top-6 md:hidden'} onClick={toggleSidebar}>
          <Image src={'shrink.png'} height={30} width={30} alt='close' unoptimized></Image>
        </div>
        <div
          className={
            'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] md:hidden'
          }
        ></div>
        <div className='pb-7 pl-4 pt-5 md:pt-9'>
          <Link href={'/dashboard'}>
            <Image
              className={'cursor-pointer'}
              src={'image.png'}
              width={102}
              height={49}
              alt='logo'
              unoptimized
            />
          </Link>
        </div>
        <SidebarContent className={''}>
          <SidebarMenu className={'gap-1 md:gap-2.5'}>
            {navs
              .filter((v) => !v.hidden)
              .map((nav, navIndex) => (
                <SidebarMenu
                  key={navIndex}
                  className={navIndex === 0 ? 'mb-4 md:mb-[42px]' : 'mb-0'}
                >
                  <SidebarMenuItem key={nav.title} className={''}>
                    <SidebarMenuButton
                      className={
                        'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] md:bg-white md:font-medium'
                      }
                      asChild
                      tooltip={t(nav.title)}
                      isActive={nav.url === pathname}
                    >
                      <Link href={nav.url} onClick={toggleSidebar} className={'gap-4'}>
                        <div className={'relative size-4'}>
                          <SvgIcon name={nav.image} />
                        </div>
                        <span>{t(nav.title)}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              ))}
          </SidebarMenu>
        </SidebarContent>

        <SidebarFooter className={'mb-6 mt-4 gap-0 px-0 pb-0'}>
          <div className={'mb-4 ml-[6px]'}>
            <LanguageSwitch />
          </div>
          <UserNav from='profile' />
        </SidebarFooter>
      </div>
    </Sidebar>
  );
}