'use client';
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 { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/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 sm:bg-white'}>
      <div
        className={
          'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 sm:ml-0 sm:h-full sm:rounded-none sm:bg-white'
        }
      >
        <div
          className={
            'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
          }
        ></div>
        <div className='pb-7 pl-4 pt-5 sm:pt-12'>
          <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 sm:gap-2.5'}>
            {navs
              .filter((v) => !v.hidden)
              .map((nav, navIndex) => (
                <SidebarMenu
                  key={navIndex}
                  className={navIndex === 0 ? 'mb-4 sm: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] sm:h-[60px] sm:bg-white sm:text-xl sm:font-normal'
                      }
                      asChild
                      tooltip={t(nav.title)}
                      isActive={nav.url === pathname}
                    >
                      <Link href={nav.url} onClick={toggleSidebar} className={'gap-4 sm:gap-0.5'}>
                        {nav.icon && <Icon className={'!size-4 sm:!size-6'} icon={nav.icon} />}
                        <span>{t(nav.title)}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              ))}
          </SidebarMenu>
        </SidebarContent>

        <SidebarFooter className={'mt-4'}>
          <UserNav from='profile' />
        </SidebarFooter>
      </div>
    </Sidebar>
  );
}