import React, { useEffect, useState } from "react";
import { Accordion, AccordionItem, Tooltip } from "@nextui-org/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>
  );
};