import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import useFilesManager from "@/hooks/useFilesManager";
import { cn } from "@/lib/utils";
import { ProjectFilesTree } from "@/models/projectFilesTree";
import {
  faArrowLeft,
  faArrowTurnUp,
  faBars,
  faCloudDownload,
  faCloudUpload,
  faHouseChimney,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { PopoverArrow } from "@radix-ui/react-popover";
import { useParams } from "next/navigation";
import { Dispatch, Fragment, SetStateAction, useEffect, useState } from "react";
import { SelectedProjectFilesUploadForm } from "../form";

type SelectedProjectFileListSkeletonProps = {
  path?: string;
  setPath: Dispatch<SetStateAction<string | undefined>>;
  treeState?: ProjectFilesTree[];
  isFileView: false | "code" | "image" | "video" | "doc";
  setIsFileView: Dispatch<
    SetStateAction<false | "code" | "image" | "video" | "doc">
  >;
  setTreeState: Dispatch<SetStateAction<ProjectFilesTree[] | undefined>>;
  isMenuOpen: boolean;
  setIsMenuOpen: Dispatch<SetStateAction<boolean>>;
  children: React.ReactNode;
};
export default function SelectedProjectFileListSkeleton({
  path,
  setPath,
  treeState,
  setIsFileView,
  setTreeState,
  isMenuOpen,
  setIsMenuOpen,
  children,
}: SelectedProjectFileListSkeletonProps) {
  const { activeSession, sendSignal } = useApp();
  const { permissions } = activeSession;

  const { dict, openModal } = useGlobal();

  const params = useParams();

  const [root, setRoot] = useState<string>();
  const [paths, setPaths] = useState<React.ReactNode>();
  const [link, setLink] = useState<string>("");

  const { handleDownloadFiles, handleMakePublicLink } = useFilesManager({
    treeState,
  });

  useEffect(() => {
    const splitPath = path?.split("/");
    const siteNameIndex = splitPath?.findIndex(
      (e) => e === `FEDSITE_${params.name}`,
    );

    const rootPath = splitPath?.slice(0, siteNameIndex! + 1).join("/");
    const pathArray = splitPath?.slice(siteNameIndex! + 1);

    let link = "";
    const newPaths = pathArray?.map((p, i) => {
      link += `/${p}`;

      return (
        <Fragment key={i}>
          {"\\"}
          <span
            data-link={link}
            className="cursor-pointer text-blue-500 last-of-type:cursor-default last-of-type:text-gray-500 hover:underline last-of-type:hover:text-gray-500 last-of-type:hover:no-underline"
            onClick={(e: any) => {
              if (i !== pathArray.length - 1) {
                setIsFileView(false);
                setPath(`${rootPath}${e.currentTarget.dataset.link}`);
              }
            }}
          >
            {p}
          </span>
        </Fragment>
      );
    });

    setLink(link);
    setRoot(rootPath);
    setPaths(newPaths);

    return () => {
      setLink(undefined);
      setRoot(undefined);
      setPaths([]);
    };
  }, [path]);

  return (
    <div className="relative flex h-full flex-col rounded border-2 border-gray-200 bg-white [&>div]:overflow-hidden">
      <div className="flex min-h-[40px] items-center gap-1 rounded rounded-b-none bg-zinc-200 p-1 text-xs text-gray-500">
        <div>
          <Button
            variant="solid"
            color="neutral"
            decorator={isMenuOpen ? faArrowLeft : faBars}
            size="xs"
            isIcon
            onClick={() => {
              if (isMenuOpen) {
                localStorage.removeItem("PROJECT-MENU-OPEN");
              } else {
                localStorage.setItem("PROJECT-MENU-OPEN", "true");
              }

              setIsMenuOpen(!isMenuOpen);
            }}
          />
        </div>
        <div className="flex w-full max-w-[300px] gap-1 overflow-hidden text-ellipsis rounded border border-gray-300 bg-gray-50 p-1 shadow-inner">
          <span
            className={cn({
              "cursor-pointer text-blue-500": paths && (paths as []).length > 0,
            })}
            onClick={() => {
              setIsFileView(false);
              setPath(undefined);
            }}
          >
            <FontAwesomeIcon icon={faHouseChimney} />
          </span>
          <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
            {paths}
          </p>
        </div>
        <div>
          <Button
            variant="solid"
            color="neutral"
            decorator={faArrowTurnUp}
            size="xs"
            isIcon
            onClick={() => {
              if (!paths || (paths as []).length == 0) return;
              setIsFileView(false);
              const newLink = link.split("/").slice(0, -1).join("/");

              if (!newLink) return setPath(root);

              setPath(`${root}${newLink}`);
            }}
          />
        </div>
        <div className="ms-auto flex gap-1">
          {permissions && permissions.canUploadFiles() && (
            <Button
              variant="solid"
              color="primary"
              decorator={faCloudUpload}
              size="sm"
              onClick={() =>
                openModal({
                  id: "upload-project-files",
                  content: (
                    <SelectedProjectFilesUploadForm
                      {...{ link, treeState, sendSignal }} 
                    />
                  ),
                })
              }
            >
              {dict.pages.general.upload}
            </Button>
          )}
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="solid"
                color="secondary"
                size="sm"
                decorator={faCloudDownload}
              >
                {dict.pages.general.download}
              </Button>
            </PopoverTrigger>
            <PopoverContent
              side="bottom"
              className="mr-4 flex w-fit flex-col p-1"
            >
              <PopoverArrow />
              <Button
                variant="plain"
                color="neutral"
                size="sm"
                onClick={handleDownloadFiles}
              >
                Zip and download
              </Button>
              <Button
                variant="plain"
                color="neutral"
                size="sm"
                onClick={handleMakePublicLink}
              >
                Make a public link
              </Button>
            </PopoverContent>
          </Popover>
        </div>
      </div>
      {children}
    </div>
  );
}