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