import React, { useEffect, useState } from "react";
import { Accordion, AccordionItem, Tooltip } from "@heroui/react";
import clsx from "clsx";
import Link from "next/link";
import { ChevronUpIcon } from "../../icons";
import { Submenu1Icon, Submenu2Icon } from "../../icons/sidebar-icon";
import { useSidebar } from "./sidebar-context";

interface SubSubItems {
  title: string;
  path: string;
  isSubActive: boolean;
}

interface SubItems {
  title: string;
  path: string;
  isActive: boolean;
  isSubActive: boolean;
  subItems?: SubSubItems[];
}

interface Props {
  title: string;
  icon?: any;
  path: string;
  isActive: boolean;
  isParentActive: boolean;
}

export const SidebarCollapseSubItems = ({
  title,
  icon,
  path,
  isActive,
  isParentActive,
}: Props) => {
  const [open, setOpen] = useState(false);
  let no = 0;

  // useEffect(() => {
  //   console.log("Sidebar Collapse Sub Item :: ", title, path, isParentActive, isActive, icon);
  // }, []);

  const { isOpen, toggleSidebar } = useSidebar();

  const renderIcon = () => {
    switch (icon) {
      case "submenu1":
        return <Submenu1Icon size={16} />;
      case "submenu2":
        return <Submenu2Icon size={16} />;
      default:
        return null; // Tidak ada ikon yang sesuai
    }
  };
  return (
    <li key={`${title}-${(no += 1)}`}>
      {isOpen ? (
        <Link href={path}>
          <div
            className={`flex items-center min-h-[36px] rounded-md py-1 text-sm 
         ${isOpen ? "px-3.5" : "px-0"} 
         ${
           isParentActive
             ? "text-zinc-300 dark:text-zinc-500 hover:text-zinc-200 dark:hover:text-zinc-600"
             : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
         } 
         ${
           isActive
             ? "font-bold hover:font-bold !text-zinc-100 dark:!text-zinc-600"
             : "hover:font-semibold"
         }`}
          >
            <span
              className={`${isOpen ? "pl-3" : "pl-0"} pr-0 flex flex-row gap-2`}
            >
              {icon} {isOpen && title}
            </span>
          </div>
        </Link>
      ) : (
        <Tooltip content={title} delay={0} closeDelay={0} placement="right">
          <Link href={path}>
            <div
              className={`flex justify-center min-h-[36px] rounded-md py-1 text-sm 
          ${isOpen ? "px-3.5" : "px-0"} 
          ${
            isParentActive
              ? "text-zinc-300 dark:text-zinc-500 hover:text-zinc-200 dark:hover:text-zinc-600"
              : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
          } 
          ${
            isActive
              ? "font-bold hover:font-bold !text-zinc-100 dark:!text-zinc-600"
              : "hover:font-semibold"
          }`}
            >
              <span
                className={`${
                  isOpen ? "pl-3" : `${isParentActive ? "pl-3" : "pl-0"}`
                } pr-0 flex flex-row`}
              >
                {icon} {isOpen && title}
              </span>
            </div>
          </Link>
        </Tooltip>
      )}
    </li>
  );
};