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


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

export const EditProjectModal: FC<IEditProjectModalProps> = ({
  onClose,
  projectID,
  show,
}) => {
  const { uid, orgID, configs, contracts } = useStoreState(
    (state) => state.user.userDetails
  );
  const { projects } = useStoreState((state) => state.projects);

  const { projectDetails } = useStoreState((state) => state.projectDetails);

  const { updateProject } = useStoreActions((actions) => actions.projects);

  const currentProject = useMemo(() => {
    return projects.find((_project) => _project.projectID === projectID);
  }, [projectID, projects]);

  const [project, setProject] = useState<
    Record<string, string | number | undefined | File>
  >(setObjectState(configs, Scopes.AddProjectForm, true, currentProject));

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

  const updateForm = (field: string, value: string) => {
    setProject({
      ...project,
      [field]: value,
    });
  };
  const submitProject = async () => {
    if (!validationNewProject()) {
      const serializeData = serializeEditedProject(project);
      const options = {
        orgID: orgID,
        projectID: projectID,
        projectUpdates: serializeData,
      };
      await apiCall("projects/updateProject", options, () => {
        serializeData.projectID = projectID;
        updateProject(serializeData);
        onClose();
      });
    }
  };


  const editForm = {
    action: updateForm,
    data: setFormConfig(
      configs,
      Scopes.AddProjectForm,
      project,
      contracts,
      projectDetails,
      projects,
      true
    ),
  };
  return (
    <>
      {project.show && (
        <Modal
          title={`${t(dictionary.editModalTitle)}: ${
            project.projectName as string
          }`}
          handleClose={onClose}
          handleConfirm={() => submitProject()}
          headerDivader={true}
          submitDisabled={validationNewProject()}
          isOpen={project.show as unknown as boolean}
          exitOnEsc={true}
          
          labels={{
            primary: t(dictionary.save),
            secondary: t(dictionary.cancel),
          }}
        >
          <Form formData={editForm} />
        </Modal>
      )}
    </>
  );
};