"use client";
import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import DashCodeLogo from "@/components/dascode-logo";
import { Group, Submenu } from "@/lib/menus";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { useConfig } from "@/hooks/use-config";

interface IconNavProps {
  menuList: Group[];
}
const IconNav = ({ menuList }: IconNavProps) => {
  const [config, setConfig] = useConfig();

  return (
    <div className=" h-full bg-sidebar  border-r border-default-200 dark:border-secondary border-dashed w-[72px]">
      <div className="text-center py-5">
        <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background mx-auto" />
      </div>
      <ScrollArea className="[&>div>div[style]]:!block h-full">
        <nav className="mt-8 h-full w-full ">
          <ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-2 ">
            {menuList?.map(({ groupLabel, menus }, index) => (
              <li key={index} className=" block w-full">
                {menus?.map(
                  ({ href, label, icon, active, id, submenus }, menuIndex) => (
                    <TooltipProvider disableHoverableContent key={menuIndex}>
                      <Tooltip delayDuration={100}>
                        <TooltipTrigger asChild>
                          {submenus.length === 0 ? (
                            <Button
                              onClick={() =>
                                setConfig((prevConfig) => ({
                                  ...prevConfig,
                                  hasSubMenu: false,
                                  subMenu: true,
                                }))
                              }
                              asChild
                              size="icon"
                              color="secondary"
                              variant={active ? "default" : "ghost"}
                              className={cn(
                                "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
                                {
                                  "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
                                    active,
                                }
                              )}
                            >
                              <Link href={href}>
                                <Icon
                                  icon={icon}
                                  className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
                                />
                              </Link>
                            </Button>
                          ) : (
                            <Button
                              onClick={() =>
                                setConfig((prevConfig) => ({
                                  ...prevConfig,
                                  hasSubMenu: true,
                                  subMenu: false,
                                }))
                              }
                              asChild
                              size="icon"
                              color="secondary"
                              variant={active ? "default" : "ghost"}
                              className={cn(
                                "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
                                {
                                  "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
                                    active,
                                }
                              )}
                            >
                              <Link href={href}>
                                <Icon
                                  icon={icon}
                                  className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
                                />
                              </Link>
                            </Button>
                          )}
                        </TooltipTrigger>

                        <TooltipContent side="right">{label}</TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  )
                )}
              </li>
            ))}
          </ul>
        </nav>
      </ScrollArea>
    </div>
  );
};

export default IconNav;