import { useState } from "react";
import { Item } from "./../interfaces/Item";
import { SidebarComponents } from "./SidebarComponents";

interface Props {
  itemsFiltered: Item[];
  group: string;
  selected: boolean;
  componentSelected?: Item;
  setComponentSelected: (value: Item) => void;
}

export function SidebarGroupItem({
  itemsFiltered,
  group,
  selected,
  componentSelected,
  setComponentSelected,
}: Props) {
  const [visibled, setVisibled] = useState(group === componentSelected?.group);

  return (
    <div>
      <div
        className={
          "cb-text-xs cb-cursor-pointer cb-text-slate-500 dark:cb-text-slate-400 hover:cb-text-black dark:hover:cb-text-white hover:cb-bg-slate-100 dark:hover:cb-bg-slate-700 cb-py-[5px] cb-px-2 cb-flex cb-justify-between " +
          (selected ? "!cb-text-black dark:!cb-text-white cb-font-bold" : "")
        }
        onClick={() => setVisibled(!visibled)}
      >
        <div>{group}</div>
        <div>{visibled ? "▲" : "▼"}</div>
      </div>
      {visibled && (
        <div>
          <SidebarComponents
            submenu
            items={itemsFiltered}
            componentSelected={componentSelected}
            setComponentSelected={setComponentSelected}
          />
        </div>
      )}
    </div>
  );
}