'use client';

import { Link, useLocation } from 'react-router-dom';

import { cn } from '@/lib/utils';
import { buttonVariants } from './formsButton';
import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
import { TooltipProvider } from '@radix-ui/react-tooltip';
import useUser from '@/hooks/useUser';

export function Nav({ routes, isCollapsed }: NavProps) {
  const { user } = useUser();
  const location = useLocation();
  return (
    <TooltipProvider>
      <div data-collapsed={isCollapsed}className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2">
        <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
          {routes.map((route, index) =>
            user?.role === 'admin' &&
            route.path === '/admin/users' ? null : isCollapsed ? (
              <Tooltip key={index} delayDuration={0}>
                <TooltipTrigger asChild>
                  <Link
                    to={route.path}
                    className={cn(
                      buttonVariants({
                        variant:
                          route.path === location.pathname
                            ? 'default'
                            : 'ghost',
                        size: 'icon',
                      }),
                      'h-9 w-9 rounded-full',
                      route.path === location.pathname &&
                        'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white'
                    )}
                  >
                    <route.icon className="h-4 w-4" />
                    <span className="sr-only">{route.name}</span>
                  </Link>
                </TooltipTrigger>
                <TooltipContent
                  side="right"
                  className="flex items-center gap-4"
                >
                  {route.name}
                </TooltipContent>
              </Tooltip>
            ) : (
              <Link
                key={index}
                to={route.path}
                className={cn(
                  buttonVariants({
                    variant:
                      route.path === location.pathname ? 'default' : 'ghost',
                    size: 'sm',
                  }),
                  'h-9',
                  route.path === location.pathname &&
                    'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
                  'justify-start'
                )}
              >
                <route.icon className="mr-2 h-4 w-4" />
                {route.name}
              </Link>
            )
          )}
        </nav>
      </div>
    </TooltipProvider>
  );
}