"use client"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import Link from "next/link"
import { ManagementIcon, UploadAccount } from "../icons"
import Image from "next/image"
import { usePathname } from "next/navigation"

const menu = [
  {
    title: "account-management",
    icon: <ManagementIcon className="h-5 w-5 shrink-0" />,
  },
  {
    title: "upload-account-data",
    icon: <UploadAccount className="h-5 w-5 shrink-0" />,
  },
  {
    title: "spesific-target",
    icon: <UploadAccount className="h-5 w-5 shrink-0" />,
  },
  {
    title: "spesific-target-mapping",
    icon: <UploadAccount className="h-5 w-5 shrink-0" />,
  },
]

export function AppSidebar() {
  const pathname = usePathname()
  return (
    <Sidebar collapsible="icon">
      <div className="bg-gray-60 h-full border-2 border-violet-300 text-black">
        {/* TRIGGER */}
        <div className="absolute top-4 right-4 z-10 transition-all duration-300 group-data-[state=collapsed]:right-auto group-data-[state=collapsed]:left-1/2 group-data-[state=collapsed]:-translate-x-1/2">
          <SidebarTrigger className="rounded-md p-2 transition hover:bg-white/10" />
        </div>

        {/* LOGO */}
        <div className="flex justify-center pt-16 transition-all duration-300 group-data-[state=collapsed]:pt-14">
          {/* <Image
            src="/multipool-logo.png"
            loading="eager"
            alt="logo"
            width={240}
            height={240}
            className="transition-all duration-300 group-data-[state=collapsed]:h-6 group-data-[state=collapsed]:w-6"
          /> */}
          <div className="h-24 w-24 bg-gray-500"></div>
        </div>

        <SidebarHeader />

        {/* MENU */}
        <SidebarContent className="mt-10">
          <SidebarGroup className="flex flex-col items-stretch space-y-2 px-2">
            {menu.map((item) => (
              <Link
                key={item.title}
                href={"/dashboard/" + item.title}
                className={`flex w-full items-center justify-start gap-3 rounded-lg p-3 text-sm ${pathname.includes(item.title) ? "border-2 border-violet-600 bg-violet-100 font-bold text-violet-600" : "text-gray-600"} transition group-data-[state=collapsed]:justify-center hover:bg-white/10`}
              >
                {item.icon}
                <span className="capitalize group-data-[state=collapsed]:hidden">
                  {item.title.split("-").join(" ")}
                </span>
              </Link>
            ))}

            {/* <Link
              href="/dashboard/upload-account-data"
              className="flex w-full items-center justify-start gap-3 rounded-lg p-3 transition group-data-[state=collapsed]:justify-center hover:bg-white/10"
            >
              <UploadAccount className="h-5 w-5 shrink-0" />
              <span className="group-data-[state=collapsed]:hidden">
                Upload Account Data
              </span>
            </Link> */}
          </SidebarGroup>
        </SidebarContent>

        <SidebarFooter />
      </div>
    </Sidebar>
  )
}