import { FC, useState } from "react";
import { Modal, Form } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { getSpoolName } from "../../helpers/spoolHelpers";
import { useStoreState } from "../../store";

interface IEditSpoolModal {
  isOpen: boolean;
  handleClose: () => void;
  spoolID: string;
  handleUpdateSpoolDetails: (
    spoolDetails: Record<string, string | number | undefined>,
    spoolID: string
  ) => void;
}
export const EditSpoolModal: FC<IEditSpoolModal> = ({
  isOpen,
  handleClose,
  handleUpdateSpoolDetails,
  spoolID,
}) => {
  const { spools } = useStoreState(
    (state) => state.projectDetails.projectDetails
  );
  const [spoolDetails, setSpoolDetails] = useState<
    Record<string, string | number | undefined>
  >({
    spoolName: getSpoolName(spoolID, spools),
  });

  const validationSpool = () => {
    return (spoolDetails.spoolName! as string).trim().length === 0;
  };

  const updateSpoolDetails = () => {
    handleUpdateSpoolDetails(spoolDetails, spoolID);
  };

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

  const editForm = {
    action: updateForm,
    data: [
      {
        type: "text",
        label: t(dictionary.spoolName),
        value: spoolDetails.spoolName,
        name: "spoolName",
        autofocus: true,
      },
    ],
  };
// ToDo check and clear
  return (
    <>
      <Modal
        title={`${t(dictionary.editModalTitle)}: ${spoolDetails.spoolName}`}
        handleClose={handleClose}
        handleConfirm={() => updateSpoolDetails()}
        // labelClose={t(dictionary.cancel)}
        // labelConfirm={t(dictionary.save)}
        submitDisabled={validationSpool()}
        isOpen={isOpen}
        exitOnEsc={true}
        labels={{
          primary: t(dictionary.save),
          secondary: t(dictionary.cancel),
        }}
      >
        <Form formData={editForm} />
      </Modal>
    </>
  );
};