import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";
import { ProjectFilesTree } from "@/models/projectFilesTree";
import {
  faFolderOpen,
  faFolder as faFolderRegular,
} from "@fortawesome/free-regular-svg-icons";
import { faEllipsisV, faFolder } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Dispatch, SetStateAction, useState } from "react";
import { v4 } from "uuid";

type RenderIconProps = {
  filteredChildren: ProjectFilesTree[];
};
function RenderIcon({ filteredChildren }: RenderIconProps) {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (
    <span
      className={cn("text-yellow-500", {
        "hover:text-yellow-700": filteredChildren.length > 0,
      })}
      id={v4()}
      onClick={() => setIsOpen(!isOpen)}
    >
      <FontAwesomeIcon
        icon={
          filteredChildren.length > 0
            ? isOpen
              ? faFolderOpen
              : faFolder
            : faFolderRegular
        }
      />{" "}
    </span>
  );
}

type RenderFolderProps = {
  folders: ProjectFilesTree[];
  setPath: Dispatch<SetStateAction<string>>;
  setIsFileView: Dispatch<
    SetStateAction<false | "code" | "image" | "video" | "doc">
  >;
  root?: boolean;
};
function RenderFolder({
  folders,
  setPath,
  setIsFileView,
  root,
}: RenderFolderProps) {
  const filteredFolders = folders.filter((e) => e.type !== "file");

  const handleSetPath = (path: string) => {
    setPath(path);
    setIsFileView(false);
  };

  return filteredFolders.map((f, i) => {
    const filteredChildren = f.children.filter((f) => f.type !== "file");
    return (
      <div key={i} className={cn("cursor-pointer", { "ps-2": !root })}>
        <Accordion type="single" collapsible>
          <AccordionItem
            value="item-1"
            disabled={filteredChildren.length === 0}
          >
            <div className="hover:bg-gray-100 p-1 py-0.5 text-xs flex gap-1 items-center">
              <AccordionTrigger
                disabled={f.children.length == 0}
                className="py-0"
              >
                <RenderIcon {...{ filteredChildren }} />
              </AccordionTrigger>
              <span
                className="grow flex justify-between gap-1 group text-gray-500 hover:text-black duration-200"
                onClick={() => handleSetPath(f.path)}
              >
                {f.name}{" "}
                <FontAwesomeIcon
                  className="text-gray-500 group-hover:text-blue-600 duration-200"
                  icon={faEllipsisV}
                />
              </span>
            </div>
            {filteredChildren.length > 0 && (
              <AccordionContent className="py-0">
                <RenderFolder
                  folders={f.children}
                  setPath={setPath}
                  setIsFileView={setIsFileView}
                />
              </AccordionContent>
            )}
          </AccordionItem>
        </Accordion>
      </div>
    );
  });
}

type SelectedProjectFolderTreeProps = {
  tree: ProjectFilesTree;
  isMenuOpen: boolean;
  setPath: Dispatch<SetStateAction<string>>;
  setIsFileView: Dispatch<
    SetStateAction<false | "code" | "image" | "video" | "doc">
  >;
};
export default function SelectedProjectFolderTree({
  tree,
  isMenuOpen,
  setPath,
  setIsFileView,
}: SelectedProjectFolderTreeProps) {
  return (
    <div
      className={cn("overflow-x-hidden duration-200 flex gap-1", {
        "ps-1 bg-white": isMenuOpen,
        "w-0 p-0": !isMenuOpen,
      })}
    >
      <div className="w-full">
        {tree?.children.length > 0 && (
          <RenderFolder
            folders={tree.children}
            setPath={setPath}
            setIsFileView={setIsFileView}
            root={true}
          />
        )}
      </div>
    </div>
  );
}