import React, { FC, useState } from "react";
import { Form, Modal } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { getContractName } from "../../helpers/projectHelper";
import { useStoreActions, useStoreState } from "../../store";
import { apiCall } from "../../untils/apiCall";
import { checkIfUserHaveContract } from "../../helpers/organizationHelper";
import { projects } from "../../store/state/projects";

interface IContractModal {
  handleClose: () => void;
  contractID?: string;
  isOpen: boolean;
}
export const ContractModal: FC<IContractModal> = ({
  handleClose,
  contractID,
  isOpen,
}) => {
  const { uid, orgID } = useStoreState((state) => state.user.userDetails);
  const { contracts } = useStoreState((state) => state.organization);
  const [contractName, setContractName] = useState(
    contractID ? getContractName(contractID, contracts) : "",
  );

  const { addContract, editContractName } = useStoreActions(
    (actions) => actions.organization,
  );
  const { editContractName: editNameForUser, addContractToUser } =
    useStoreActions((actions) => actions.user);

  const updateName = (field: string, value: string | number) => {
    setContractName(value as string);
  };

  const handleConfirm = async () => {
    if (contractID) {
      const options = {
        contractName: contractName.trim(),
        orgID: orgID,
        contractID: contractID,
      };
      await apiCall(
        "organization/updateContractName",
        options,
        (response: any) => {
          editContractName({ contractID, contractName: contractName.trim() });
          if (checkIfUserHaveContract(contractID, contracts)) {
            editNameForUser({ contractID, contractName: contractName.trim() });
          }
          handleClose();
        },
      );
    } else {
      const options = {
        contract: {
          contractName: contractName.trim(),
        },
        orgID: orgID,
        userID: uid,
      };
      await apiCall(
        "organization/createNewContract",
        options,
        (response: any) => {
          const newContract = {
            contractID: response.newContarctID,
            id: response.newContarctID,
            contractName: contractName,
          };

          addContractToUser({
            id: newContract.contractID,
            contractID: newContract.contractID,
            contractName: contractName,
            projects: [],
          });

          addContract({ contract: newContract, userID: uid! });

          handleClose();
        },
      );
    }
  };
  const newProjectForm = {
    action: updateName,
    data: [
      {
        type: "text",
        label: t(dictionary.contractName),
        value: contractName,
        name: "name",
        autofocus: true,
        submit: handleConfirm,
      },
    ],
  };
  return (
    <Modal
      title={
        contractID
          ? t(dictionary.editContractName)
          : t(dictionary.createNewContract)
      }
      handleClose={handleClose}
      handleConfirm={handleConfirm}
      submitDisabled={contractName === ""}
      isOpen={isOpen}
      exitOnEsc={true}
      headerDivader={true}
      labels={{
        primary: contractID ? t(dictionary.save) : t(dictionary.add),
        secondary: t(dictionary.close),
      }}
    >
      <Form formData={newProjectForm} />
    </Modal>
  );
};