import React, { FC, useEffect, useState } from "react";
import { Form, Modal } from "venice-ui";
import { apiCall } from "../../untils/apiCall";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { useStoreState } from "../../store";
import { TScopesType } from "../../untils/const";

export interface IFileUpdate {
  file: string;
  fileToken: string;
  fileName: string;
  sectionID: string;
  revision: number;
}
interface IRevisionData {
  show: boolean;
  projectID: string;
  sectionID: string;
  oldFileName: string;
  revision: number;
  file: File | undefined;
}

interface IAddRevisionModal {
  onClose: () => void;
  onConfirm: (fileUpdate: TScopesType) => void;
  dataSet: IRevisionData;
  isOpen: boolean;
}

export const AddRevisionModal: FC<IAddRevisionModal> = ({
  onClose,
  onConfirm,
  dataSet,
  isOpen,
}) => {
  const { orgID } = useStoreState((state) => state.user.userDetails);
  const [editData, setEditData] = useState<IRevisionData>({
    show: true,
    file: undefined,
    projectID: "",
    sectionID: "",
    revision: 1,
    oldFileName: "",
  });
  const [loadingAction, setLoadingAction] = useState(false);

  useEffect(() => {
    const updateData = { ...dataSet };
    updateData.revision = parseInt(dataSet.revision as unknown as string) + 1;
    setEditData(updateData);
  }, [dataSet]);

  const updateForm = (field: string, value: string) => {
    setEditData({
      ...editData,
      [field]: value,
    });
  };

  const updateProjectFile = async () => {
    setLoadingAction(true);
    let formData = new FormData();
    formData.append("orgID", orgID);
    formData.append("projectID", editData.projectID!);
    formData.append("sectionID", editData.sectionID!);
    formData.append("revision", editData.revision.toString());
    formData.append("oldFile", editData.oldFileName!);
    formData.append("file", editData!.file!);
    await apiCall("projects/addRevision", formData, (response: any) => {
      setLoadingAction(false);
      onConfirm(response.newRevisionDetails);
    });
  };

  const revisionForm = {
    action: updateForm,
    data: [
      {
        type: "file",
        label: t(dictionary.pdfFile),
        value: editData?.file,
        name: "file",
        buttonLabel: t(dictionary.selectFile),
      },
      {
        type: "number",
        label: t(dictionary.revision),
        value: editData?.revision,
        name: "revision",
      },
    ],
  };
  return (
    <>
      {editData.show && (
        <Modal
          title={`${t(dictionary.newRevision)}`}
          handleClose={onClose}
          handleConfirm={() => updateProjectFile()}
          submitDisabled={editData.file === undefined}
          isOpen={isOpen}
          exitOnEsc={true}
          submitLoader={loadingAction}
          labels={{
            primary: t(dictionary.save),
            secondary: t(dictionary.cancel),
          }}
          headerDivader={true}
        >
          <Form formData={revisionForm} />
        </Modal>
      )}
    </>
  );
};