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

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>
}

interface NavItemButtonProps {
    icon: React.ReactNode;
    onClick: () => void;
    name: string;
    className?: string;
}

export function NavItemButton({
    icon,
    onClick,
    name,
    className
}: NavItemButtonProps) {
    return <Tooltip>
        <TooltipTrigger asChild>
            <Button
                onClick={onClick}
                variant="ghost"
                className={className}
            >
                {icon}
                <span className="sr-only">{name}</span>
            </Button>
        </TooltipTrigger>
        <TooltipContent side="right">{name}</TooltipContent>
    </Tooltip>
}

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

    return <aside className="h-dvh flex flex-col">
        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
            {navItems && <>{navItems} <Separator/> </>}
            <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>
}