import { useConfirm } from "@/components/confirm/hooks/useConfirm";
import { LoadingText } from "@/components/loading";
import Tooltip from "@/components/Tooltip";
import { Button } from "@/components/ui/button";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { ServerRequest } from "@/lib/actions";
import deleteUsers from "@/services/users/delete";
import resetPassword from "@/services/users/reset";
import { socket } from "@/socket";
import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faKey } from "@fortawesome/free-solid-svg-icons";
import { useEffect, useRef, useState, useTransition } from "react";
import { createPortal } from "react-dom";
import { toast } from "sonner";

type ActionsProps = {
  row: UserData;
};
export const Actions = ({ row }: ActionsProps) => {
  const { activeSession } = useApp();
  const { permissions } = activeSession;

  const { dict } = useGlobal();
  const { confirm } = useConfirm();

  const ref = useRef<HTMLDivElement>(null);

  const [_, startTransition] = useTransition();

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

  const { id, email } = row;

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

    setToggling(true);
    startTransition(async () => {
      const promise = new Promise(async (resolve, reject) => {
        const formData = new FormData();
        formData.append("ids", JSON.stringify([id]));

        const result = await ServerRequest(deleteUsers(formData));

        if (!result.operation) {
          setToggling(false);
          reject(result);
        }

        socket.emit("delete-user", { id });
        resolve(result);
      });

      toast.promise(promise, {
        loading: dict.alerts.delete_user.loading,
        success: ({ message }) => message,
        error: ({ message }) => message,
      });
    });
  };

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

    const promise = new Promise(async (resolve, reject) => {
      const formData = new FormData();
      formData.append("id", id);
      formData.append("email", email);

      const result = await ServerRequest(resetPassword(formData));

      if (!result.operation) {
        reject(result);
      }

      resolve(result);
    });

    toast.promise(promise, {
      loading: dict.alerts.reset_password.loading,
      success: ({ message }) => message,
      error: ({ message }) => message,
    });
  };

  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-center gap-1" ref={ref}>
      {permissions && (
        <>
          {permissions.canCreateProfile && (
            <Tooltip content={dict.pages.users.table.cells.reset}>
              <Button
                variant="soft"
                color="primary"
                size="sm"
                decorator={faKey}
                isIcon
                rounded
                onClick={handleResetPassword}
              />
            </Tooltip>
          )}
          {permissions.canDeleteProfile && (
            <Tooltip content={dict.pages.users.table.cells.delete}>
              <div>
                <Button
                  variant="soft"
                  color="danger"
                  size="sm"
                  decorator={faTrashAlt}
                  isIcon
                  rounded
                  onClick={handleDeleteUser}
                />
                {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>
  );
};

export default Actions;