"use client"

import { Icons, IconsType } from "@/components/icons";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { SidebarNavItem } from "@/types";
import { signIn, signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { GameUnityLogo } from "./logo";
import { ModeToggle } from "./mode-toggle";

interface DashboardNavProps {
    items: SidebarNavItem[]
}

export default function DashboardNav({ items }: DashboardNavProps) {
    const path = usePathname()
    const { data: session } = useSession();
    if (!items?.length) {
        return null
    }

    const isLoaded = true
    const user = "test"

    return (
        <nav className="grid items-start gap-2">
            <div className="flex items-center">
                <Link href="/" className={cn("rounded-full p-3 hover:bg-accent")}>
                    <GameUnityLogo className="h-8 w-8" />
                </Link>
            </div>
            {session?.user && isLoaded && user ?
                (items.map((item, index) => {
                    const Icon = Icons[item.icon as keyof IconsType || "arrowRight"];
                    if (item.title === "My Profile") {
                        item.href = `/${user}`
                    }
                    return (
                        item.href && (
                            <Link key={index} href={item.disabled ? "/" : item.href} className={index == 6 ? "mt-10" : ""}>
                                <span
                                    className={cn(
                                        "group flex items-center rounded-md px-3 py-2 font-medium hover:bg-accent hover:text-accent-foreground",
                                        path === item.href ? "bg-accent" : "transparent",
                                        item.disabled && "cursor-not-allowed opacity-80"
                                    )}
                                >
                                    <Icon className="mr-2 h-4 w-4" />
                                    <span>{item.title}</span>
                                </span>
                            </Link>
                        )
                    )
                }))
                :
                <div className="space-x-2 space-y-2 justify-center text-center">
                    <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>Log In</Link>
                    <Link href="/signup" className={cn(buttonVariants({ size: "lg", variant: "outline" }))}>Sign Up</Link>
                    <p>
                        Unlock endless possibilities - sign up or log in to unleash the full potential of our website.
                    </p>
                </div>
            }
            {session?.user &&
                <>
                    <p className="text-sky-600"> {session?.user.name}</p>
                    <button className=" text-red-500" onClick={() => signOut()}>
                        Sign Out
                    </button>
                </>
            }
            <ModeToggle />
        </nav>
    )
}