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 IArchiveDemoUserModalProps {
  isOpen: boolean;
  user: IUserDemoDetails | null;
  onClose: () => void;
}

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

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

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

    setLoading(true);
    try {
      await apiCall(
        "demoManagment/archiveDemoUser",
        { uid, userID: user.id },
        () => {
          archiveDemoUser({ userID: user.id || '' });
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <Modal
      title={t(dictionary.archiveUserHeader)}
      handleClose={onClose}
      handleConfirm={handleArchiveUser}
      isOpen={isOpen}
      submitDisabled={!ifDeleteable || loading}
      submitLoader={loading}
      exitOnEsc
      labels={{
        primary: ifDeleteable ? t(dictionary.archive) : 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.archiveUserHeader)}</Text>
            <DeleteElementFrame>{user?.email}</DeleteElementFrame>
            <Text>{t(dictionary.doYouWantArchiveUser)}</Text>
          </>
        ) : (
          <Text>{t(dictionary.cantArchiveUser)}</Text>
        )}
      </Aligment>
    </Modal>
  );
};