import { FC, useState } from "react";
import { Aligment, Modal, Text } from "venice-ui";
import { IUserDemoDetails } from "../../store/interface/demo";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { DeleteElementFrame } from "../components";
import { apiCall } from "../../untils/apiCall";
import { useStoreActions, useStoreState } from "../../store";

interface IDeleteDemoUserModalProps {
  isOpen: boolean;
  user: IUserDemoDetails | null;
  onClose: () => void;
}

export const DeleteDemoUserModal: FC<IDeleteDemoUserModalProps> = ({
  isOpen,
  user,
  onClose,
}) => {
  const ifDeleteable = user?.status !== "on test";
  const { uid } = useStoreState((state) => state.user.userDetails);
  const deleteDemoUser = useStoreActions(
    (actions) => actions.demo.deleteDemoUser,
  );

  const [loading, setLoading] = useState(false);

  const handleDeleteUser = async () => {
    if (!ifDeleteable || !uid || !user?.id || loading) {
      return;
    }

    const userID = user.id;

    setLoading(true);
    try {
      await apiCall(
        "demoManagment/deleteDemoUser",
        { uid, userID },
        () => {
          deleteDemoUser({ userID });
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <Modal
      title={t(dictionary.deleteUserHeader)}
      handleClose={onClose}
      handleConfirm={handleDeleteUser}
      isOpen={isOpen}
      submitDisabled={!ifDeleteable || loading}
      submitLoader={loading}
      exitOnEsc
      labels={{
        primary: ifDeleteable ? t(dictionary.delete) : undefined,
        secondary: ifDeleteable ? t(dictionary.cancel) : t(dictionary.close),
      }}
      primaryVariant={ifDeleteable ? "danger" : "primary"}
    >
      <Aligment
        direction="column"
        align="flex-start"
        justify="flex-start"
        gap={16}
      >
        {ifDeleteable ? (
           <>
            <Text>{t(dictionary.deleteUserHeader)}</Text>
            <DeleteElementFrame>{user?.email}</DeleteElementFrame>
            <Text>{t(dictionary.doYouWantDeleteUser)}</Text>
          </>
        ) : (
          <Text>{t(dictionary.cantDeleteUser)}</Text>
        )}
      </Aligment>
    </Modal>
  );
};