import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { cn, identifyFileType } from "@/lib/utils";
import { ProjectFilesTree } from "@/models/projectFilesTree";
import { faFileAlt } from "@fortawesome/free-regular-svg-icons";
import {
  faEllipsis,
  faFolder,
  faGripVertical,
  faRocket,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useParams } from "next/navigation";
import { Fragment, useState } from "react";
import { createPortal } from "react-dom";
import TableListError from "../../../../../components/table/data/error";
import TableListLoading from "../../../../../components/table/data/loading";
import {
  handleDeleteItem,
  handleRenameItem,
  handleViewItem,
} from "../../handlers";
import handleSaveFile from "../../handlers/_saveFile";
import { useContent, useContextMenu, useHeaderOptions } from "../../hooks";
import SelectedProjectFolderTree from "../_layout/folders";
import SelectedProjectFileListSkeleton from "../_layout/skeleton";
import ContextMenu from "./_context";
import SelectedProjectFileView from "./_view";

export default function SelectedFileList() {
  const { dict } = useGlobal();

  const params = useParams();

  const { sendSignal } = useApp();

  const { contextMenu, setContextMenuState } = useContextMenu();
  const { path, tree, treeState, contentStatus, setPath, setTreeState } =
    useContent();
  useHeaderOptions();

  const [isFileView, setIsFileView] = useState<
    false | "code" | "image" | "video" | "doc"
  >(false);
  const [file, setFile] = useState<{ content?: string; type?: string }>();
  const [isContentEditable, setIsContentEditable] = useState<boolean>(true);
  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(
    !!localStorage.getItem("PROJECT-MENU-OPEN"),
  );

  const handleViewItemClick = (item: ProjectFilesTree) =>
    handleViewItem({ item, setPath, setIsFileView, setFile, dict });

  const handleRenameItemClick = (item: ProjectFilesTree) =>
    handleRenameItem({ item, sendSignal, dict });

  const handleDeleteItemClick = (item: ProjectFilesTree) =>
    handleDeleteItem({ item, sendSignal, dict });

  const handleSaveFileClick = () =>
    handleSaveFile({ path, file, params, dict });

  return (
    <>
      {contextMenu &&
        createPortal(
          <div
            className="context-menu z-10 w-fit space-y-1 rounded-md border border-slate-200 bg-white p-1 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
            style={{
              opacity: 0,
              position: "absolute",
              minWidth: "max-content",
              zIndex: "50",
            }}
          >
            {contextMenu}
          </div>,
          document.body,
        )}
      <SelectedProjectFileListSkeleton
        {...{
          path,
          setPath,
          treeState,
          isFileView,
          setIsFileView,
          setTreeState,
          isMenuOpen,
          setIsMenuOpen,
        }}
      >
        <div className="h-full">
          <ResizablePanelGroup direction="horizontal">
            <ResizablePanel minSize={10} maxSize={isMenuOpen ? 15 : 0}>
              <SelectedProjectFolderTree
                {...{ tree, isMenuOpen, setPath, setIsFileView }}
              />
            </ResizablePanel>
            <ResizableHandle disabled={!isMenuOpen}>
              <FontAwesomeIcon icon={faGripVertical} />
            </ResizableHandle>
            <ResizablePanel>
              <div className="h-full grow">
                {!isFileView ? (
                  <Table className="h-fit">
                    <TableHeader>
                      <TableRow>
                        <TableHead>
                          {dict.pages.project_files.table.head.name}
                        </TableHead>
                        <TableHead>
                          {dict.pages.project_files.table.head.size}
                        </TableHead>
                        <TableHead>
                          {dict.pages.project_files.table.head.type}
                        </TableHead>
                        <TableHead className="text-center">
                          <FontAwesomeIcon icon={faRocket} />
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody className="[&_.clicked]:bg-blue-50">
                      {contentStatus === "loading" ? (
                        <TableListLoading />
                      ) : contentStatus === "error" ? (
                        <TableListError />
                      ) : treeState && treeState.length > 0 ? (
                        treeState?.map((item, i) => (
                          <Fragment key={i}>
                            <TableRow
                              className="h-0"
                              onClick={(e) => {
                                document
                                  .querySelectorAll("tr.clicked")
                                  .forEach((el) =>
                                    el.classList.remove("clicked"),
                                  );

                                e.currentTarget.classList.add("clicked");
                              }}
                              onContextMenu={(e) => {
                                e.preventDefault();
                                document
                                  .querySelectorAll("tr.clicked")
                                  .forEach((el) =>
                                    el.classList.remove("clicked"),
                                  );
                                e.currentTarget.classList.add("clicked");

                                setContextMenuState(
                                  e,
                                  <ContextMenu
                                    {...{
                                      handleViewItemClick,
                                      handleRenameItemClick,
                                      handleDeleteItemClick,
                                      item,
                                    }}
                                  />,
                                );
                              }}
                              onDoubleClick={() => handleViewItemClick(item)}
                            >
                              <TableCell className="max-w-[100px] overflow-hidden sm:max-w-[250px] md:max-w-[300px] lg:max-w-[500px]">
                                <p className="w-full text-ellipsis whitespace-nowrap">
                                  <span className="inline-flex min-w-[15px] justify-center">
                                    <FontAwesomeIcon
                                      className={cn({
                                        "text-gray-500": item.type,
                                        "text-yellow-500": !item.type,
                                      })}
                                      icon={item.type ? faFileAlt : faFolder}
                                    />
                                  </span>{" "}
                                  {item.name}
                                </p>
                              </TableCell>
                              <TableCell>
                                <p className="whitespace-nowrap">{item.size}</p>
                              </TableCell>
                              <TableCell>
                                <p className="whitespace-nowrap capitalize">
                                  {identifyFileType(item.name)}
                                </p>
                              </TableCell>
                              <TableCell className="w-0 text-center">
                                <div className="flex gap-2">
                                  <Popover>
                                    <PopoverTrigger asChild>
                                      <Button
                                        variant="soft"
                                        color="primary"
                                        size="sm"
                                        isIcon
                                        rounded
                                        decorator={faEllipsis}
                                      />
                                    </PopoverTrigger>
                                    <PopoverContent
                                      align="end"
                                      className="z-10 w-fit space-y-1 p-2 text-xs [&_button]:h-fit [&_button]:w-full [&_button]:justify-start [&_button]:gap-1 [&_button]:p-[4px_8px] [&_button]:text-left hover:[&_button]:bg-gray-200"
                                    >
                                      <ContextMenu
                                        {...{
                                          handleViewItemClick,
                                          handleRenameItemClick,
                                          handleDeleteItemClick,
                                          item,
                                        }}
                                      />
                                    </PopoverContent>
                                  </Popover>
                                </div>
                              </TableCell>
                            </TableRow>
                          </Fragment>
                        ))
                      ) : (
                        <TableRow className="relative">
                          <TableCell className="py-3">
                            <p className="text-gray-500">
                              {dict.pages.project_files.table.columns.no_files}
                            </p>
                          </TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </Table>
                ) : (
                  <SelectedProjectFileView
                    file={file}
                    fileView={isFileView}
                    path={path}
                    setFile={setFile}
                    isContentEditable={isContentEditable}
                    handleSaveFileClick={handleSaveFileClick}
                  />
                )}
              </div>
            </ResizablePanel>
          </ResizablePanelGroup>
        </div>
      </SelectedProjectFileListSkeleton>
    </>
  );
}