import { FC, useEffect, useState } from "react";
import { Modal, Form } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { useStoreActions, useStoreState } from "../../store";
import { apiCall } from "../../untils/apiCall";
import { serializeProject } from "../../definitionsNew/serializaConfigs";
import {
  setFormConfig,
  setObjectState,
} from "../../definitionsNew/setFieldsHelper";
import { Scopes } from "../../definitionsNew/fields";
import { IProjectInContractProps } from "../../store/interface/organization";

interface IAddProjectModalProps {
  onClose: () => void;
  contractID: string;
  show: boolean;
}

export const AddProjectModal: FC<IAddProjectModalProps> = ({
  onClose,
  contractID,
  show,
}) => {
  const { uid, orgID, lang, configs } = useStoreState(
    (state) => state.user.userDetails
  );
  const { contracts } = useStoreState((state) => state.organization);
  const { projects } = useStoreState((state) => state.projects);
  const { projectDetails } = useStoreState((state) => state.projectDetails);
  const [project, setProject] = useState<Record<string, string | number>>(
    setObjectState(configs, Scopes.AddProjectForm)
  );

  const { addProjectToContract } = useStoreActions(
    (actions) => actions.organization
  );
  const { addProject } = useStoreActions((actions) => actions.projects);

  useEffect(() => {
    setProject({
      ...project,
      contractID: contractID,
    });
  }, [contractID]);

  const updateForm = (field: string, value: string) => {
    setProject({ ...project, [field]: value });
  };
  const handleConfirm = async () => {
    if (!validationProject()) {
      const options = {
        project: serializeProject(project, uid as string),
        orgID: orgID,
      };
      await apiCall("projects/createProject", options, (response: any) => {
        // add project to organizations => contract => projects
        addProjectToContract({
          contractID: contractID,
          project: {
            projectID: response.newProjectID as string,
            projectName: options.project.projectName as string,
          } as IProjectInContractProps,
        });

        // add project to projects => projects
        addProject({
          ...options.project,
          projectID: response.newProjectID as string,
          id: response.newProjectID as string,
        });

        onClose();
      });
    }
  };
  const validationProject = () => {
    const name = project.projectName as string;
    return name.length === 0;
  };

  const addForm = {
    action: updateForm,
    data: setFormConfig(
      configs,
      Scopes.AddProjectForm,
      project,
      contracts,
      projectDetails,
      projects,
      true,
      undefined,
      [],
      false
    ),
  };

  return (
          //ToDo check and clear
    <>
      {show && (
        <Modal
          title={`${t(dictionary.addProject)}`}
          handleClose={onClose}
          handleConfirm={() => handleConfirm()}
          submitDisabled={validationProject()}
          isOpen={show as unknown as boolean}
          exitOnEsc={true}
          headerDivader={true}
          labels={{
            primary: t(dictionary.save),
            secondary: t(dictionary.cancel),
          }}
        >
          <Form formData={addForm} />
        </Modal>
      )}
    </>
  );
};