import { FC, useState } from "react";
import { Aligment, Modal, Text } from "venice-ui";
import { IDemoOrganizations } 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 IDeleteOrganiaztionModalProps {
  isOpen: boolean;
  organization: IDemoOrganizations | null;
  onClose: () => void;
}

export const DeleteOrganiaztionModal: FC<IDeleteOrganiaztionModalProps> = ({
  isOpen,
  organization,
  onClose,
}) => {
  const ifDeleteable = organization?.status === "free";
  const { uid } = useStoreState((state) => state.user.userDetails);
  const removeDemoOrganization = useStoreActions(
    (actions) => actions.demo.removeDemoOrganization,
  );
  const [loading, setLoading] = useState(false);

  const handleDeleteOrganization = async () => {
    if (!ifDeleteable || !organization?.orgID || loading) {
      return;
    }

    setLoading(true);
    try {
      await apiCall(
        "demoManagment/removeDemoOrganization",
        { uid, orgID: organization.orgID },
        () => {
          removeDemoOrganization(organization.orgID);
          onClose();
        },
      );
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <Modal
      title={t(dictionary.deleteOrganizationTitle)}
      handleClose={onClose}
      handleConfirm={handleDeleteOrganization}
      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.deleteOrganizationHeader)}</Text>
            <DeleteElementFrame>{organization?.orgName}</DeleteElementFrame>
            <Text>{t(dictionary.doYouWantDeleteOrganization)}</Text>
          </>
        ) : (
          <Text>{t(dictionary.cantDeleteOrganization)}</Text>
        )}
      </Aligment>
    </Modal>
  );
};