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

interface FinishTestsModalProps {
  isOpen: boolean;
  onClose: () => void;
  orgID?: string;
  userID?: string;
  label?: string;
}

export const FinishTestsModal: FC<FinishTestsModalProps> = ({
  isOpen,
  orgID,
  userID,
  onClose,
  label,
}) => {
  const { uid } = useStoreState((state) => state.user.userDetails);
  const finishDemo = useStoreActions((actions) => actions.demo.finishDemo);
  const [loading, setLoading] = useState(false);

  const hasActiveDemo = Boolean(orgID && userID);

  const handleFinishTests = async () => {
    if (!hasActiveDemo || !orgID || !userID || !uid || loading) {
      return;
    }

    setLoading(true);

    try {
      await apiCall(
        "demoManagment/finishDemo",
        {
          uid,
          orgID,
          userID,
        },
        () => {
          finishDemo({
            orgID,
            userID,
          });
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={t(dictionary.finishTestsTitle)}
      handleClose={onClose}
      handleConfirm={handleFinishTests}
      isOpen={isOpen}
      submitDisabled={!hasActiveDemo || loading}
      submitLoader={loading}
      exitOnEsc
      labels={{
        primary: hasActiveDemo ? t(dictionary.finish) : undefined,
        secondary: hasActiveDemo ? t(dictionary.cancel) : t(dictionary.close),
      }}
      primaryVariant={hasActiveDemo ? "danger" : "primary"}
    >
      <Aligment
        direction="column"
        align="flex-start"
        justify="flex-start"
        gap={16}
      >
        {hasActiveDemo ? (
          <>
            <Text>{t(dictionary.finishTestsHeader)}</Text>
            {label && <DeleteElementFrame>{label}</DeleteElementFrame>}
            <Text>{t(dictionary.doYouWantFinishTests)}</Text>
          </>
        ) : (
          <Text>{t(dictionary.organizationNoTests)}</Text>
        )}
      </Aligment>
    </Modal>
  );
};