import { FC, useState } from "react";
import { Modal, Form } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import {
  getContractAndProjectIds,
  getProjectNameInContract,
} from "../../helpers/organizationHelper";
import { useStoreActions, useStoreState } from "../../store";
import { apiCall } from "../../untils/apiCall";

interface IEditProjectNameModalProps {
  onClose: () => void;
  projectID: string;
  show: boolean;
}

export const EditProjectNameModal: FC<IEditProjectNameModalProps> = ({
  onClose,
  projectID,
  show,
}) => {
  const { orgID } = useStoreState((state) => state.user.userDetails);
  const { contracts } = useStoreState((state) => state.organization);
  const { updateProjectNameInContract } = useStoreActions(
    (actions) => actions.organization
  );
  const [projectName, setProjectName] = useState(
    getProjectNameInContract(contracts, projectID)
  );
  const updateForm = (field: string, value: string) => {
    setProjectName(value as string);
  };
  const handleConfirm = async () => {
    if (!validationProject()) {
      const projectData = {
        projectName: projectName,
      };
      const options = {
        orgID: orgID,
        projectID: projectID,
        projectUpdates: projectData,
      };
      await apiCall("projects/updateProject", options, () => {
        const ids = getContractAndProjectIds(contracts, projectID);

        updateProjectNameInContract({
          contractID: ids.contractID,
          projectID: ids.projectID,
          projectName,
        });
        onClose();
      });
    }
  };
  const validationProject = () => {
    const name = projectName as string;
    return name.length === 0;
  };
  const editForm = {
    action: updateForm,
    data: [
      {
        type: "text",
        label: t(dictionary.projectName),
        value: projectName,
        name: "name",
        autofocus: true,
        submit: handleConfirm,
      },
    ],
  };
//ToDo check and clear
  return (
    <>
      {show && (
        <Modal
          title={`${t(dictionary.editModalTitle)}: ${projectName as string}`}
          handleClose={onClose}
          handleConfirm={() => handleConfirm()}
          // labelClose={t(dictionary.cancel)}
          // labelConfirm={t(dictionary.save)}
          submitDisabled={validationProject()}
          isOpen={show as unknown as boolean}
          exitOnEsc={true}
          labels={{
            primary: t(dictionary.save),
            secondary: t(dictionary.cancel),
          }}
        >
          <Form formData={editForm} />
        </Modal>
      )}
    </>
  );
};