import React, { useEffect, useState } from "react";
import clsx from "clsx";
import { Accordion, AccordionItem, Tooltip } from "@heroui/react";

import { ChevronUpIcon } from "../../icons";
import { DashboardIcon, HomeIcon, TableIcon } from "../../icons/sidebar-icon";
import { useSidebar } from "./sidebar-context";

interface Props {
  icon?: string;
  title: string;
  items?: React.ReactNode[];
  isActive: boolean;
}

export const SidebarCollapseItems = ({
  title,
  items,
  icon,
  isActive,
}: Props) => {
  const { isOpen, toggleSidebar } = useSidebar();

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

  const renderIcon = () => {
    switch (icon) {
      case "dashboard":
        return <DashboardIcon />;
      case "menu1":
        return <HomeIcon />;
      case "table":
        return <TableIcon />;
      default:
        return null; // Tidak ada ikon yang sesuai
    }
  };
  return (
    <div
      className={`flex gap-4 h-full  items-center cursor-pointer rounded-lg ${
        isActive
          ? `bg-zinc-600 dark:bg-zinc-300 ${
              isOpen ? "max-w-[253px]" : "max-w-[48px]"
            } `
          : ""
      } `}
    >
      <Accordion
        className={`${isOpen ? "pr-4 pl-0" : "pl-0 pr-4"} `}
        defaultExpandedKeys={isActive ? [title] : ""}
      >
        <AccordionItem
          key={title}
          indicator={<ChevronUpIcon />}
          classNames={{
            // indicator: "data-[open=true]:-rotate-180",
            indicator: `${isOpen ? "data-[open=true]:-rotate-180" : "hidden"}`,
            trigger: `${
              isOpen ? "pl-[7px]" : "pl-[11px] "
            } py-2 rounded-lg active:scale-[0.98] transition-transform text-center ${
              isActive
                ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold font-bold hover:font-bold"
                : " hover:bg-zinc-400 hover:font-semibold"
            }`,
            title: `${
              isOpen ? "pl-2 gap-2" : "px-0"
            } flex text-base h-full items-center cursor-pointer`,
          }}
          aria-label="Accordion 1"
          title={
            <div
              className={`w-full ${
                isActive
                  ? "text-zinc-300 dark:text-zinc-600"
                  : " !text-zinc-600 dark:!text-zinc-400"
              } flex flex-row ${isOpen && "gap-2"} `}
            >
              {icon && (
                <span className={isOpen ? "pl-[1px]" : "self-center pl-0"}>
                  {icon}
                </span>
              )}
              {/* {isOpen && <span>{title}</span>} */}
              {isOpen && <span>{title}</span>}
            </div>
          }
        >
          <div
            className={`border-zinc-500 dark:border-zinc-600 ${
              isOpen ? "ml-6 border-l-1" : "border-none"
            }`}
          >
            <ul className=" overflow-hidden">{items}</ul>
          </div>
        </AccordionItem>
      </Accordion>
    </div>
  );
};