import { Link } from "wouter"
import { MagnifyingGlassIcon, GearIcon, ActivityLogIcon, ArchiveIcon, PersonIcon } from "@radix-ui/react-icons"
import { buttonVariants } from "@/components/ui/button.tsx"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx"
import { useLogin } from "@/state/user.ts";

interface NavItemProps {
    icon: React.ReactNode;
    to: string;
    name: string;
}

export function NavItem({
    icon,
    to,
    name
}: NavItemProps) {
    return <Tooltip>
        <TooltipTrigger asChild>
            <Link
                href={to}
                className={buttonVariants({ variant: "ghost" })}
            >
                {icon}
                <span className="sr-only">{name}</span>
            </Link>
        </TooltipTrigger>
        <TooltipContent side="right">{name}</TooltipContent>
    </Tooltip>
}

export function NavList() {
    const loginInfo = useLogin();

    return <aside className="h-screen flex flex-col">
        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
            <NavItem icon={<MagnifyingGlassIcon className="h-5 w-5" />} to="/search" name="Search" />
            <NavItem icon={<ActivityLogIcon className="h-5 w-5" />} to="/tags" name="Tags" />
            <NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
        </nav>
        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
            <NavItem icon={<PersonIcon className="h-5 w-5" />} to={ loginInfo ? "/profile" : "/login"} name={ loginInfo ? "Profiles" : "Login"} />
            <NavItem icon={<GearIcon className="h-5 w-5" />} to="/setting" name="Settings" />
        </nav>
    </aside>
}