import { Button } from "@/components/ui/button";

import { useConfirm } from "@/components/confirm/hooks/useConfirm";
import { LoadingText } from "@/components/loading";
import Tooltip from "@/components/Tooltip";
import { useApp } from "@/context/app";
import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faFolderOpen, faLink } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { useEffect, useRef, useState, useTransition } from "react";
import { createPortal } from "react-dom";
import deleteProject from "../../../handlers/handleDeleteProject";

type ActionsProps = {
  row: ProjectData;
  dict: Dictionary;
};
export default function Actions({ row, dict }: ActionsProps) {
  const { activeSession } = useApp();
  const { permissions } = activeSession;

  const { confirm } = useConfirm();

  const ref = useRef<HTMLDivElement>(null);

  const [_, startTransition] = useTransition();

  const [toggling, setToggling] = useState(false);
  const [parent, setParent] = useState<HTMLElement>();

  const handleDeleteClick = async () => {
    const isConfirmed = await confirm();
    if (!isConfirmed) return;

    setToggling(true);
    startTransition(async () => {
      deleteProject({
        name: row.name,
        dict,
        setToggling,
      });
    });
  };

  useEffect(() => {
    if (!ref.current) return;

    setParent(ref.current.parentElement.parentElement);

    if (!parent) return;

    if (toggling) {
      parent.classList.add("relative");
    } else {
      parent.classList.remove("relative");
    }
  }, [toggling, ref.current]);

  return (
    <div className="flex justify-between gap-1" ref={ref}>
      <Tooltip content={dict.pages.general.open_link}>
        <Link href={`https://${row.name}.fedgovadv.info`} target="_blank">
          <Button
            variant="soft"
            color="primary"
            size="sm"
            decorator={faLink}
            isIcon
            rounded
          />
        </Link>
      </Tooltip>
      <Tooltip content={dict.pages.general.delete}>
        <Link href={`/projects/${row.name}/files`}>
          <Button
            variant="soft"
            color="warning"
            size="sm"
            decorator={faFolderOpen}
            isIcon
            rounded
          />
        </Link>
      </Tooltip>
      {permissions && permissions.canDeleteProject() && (
        <Tooltip content={dict.pages.general.delete}>
          <div>
            <Button
              variant="soft"
              color="danger"
              size="sm"
              decorator={faTrashAlt}
              isIcon
              rounded
              onClick={handleDeleteClick}
            />
            {toggling && (
              <>
                createPortal(
                <div className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-neutral-200/50">
                  <LoadingText text="Deleting..." />
                </div>
                , parent, )
              </>
            )}
          </div>
        </Tooltip>
      )}
    </div>
  );
}