import React, { FC, useState } from "react";
import { Input, Modal } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";


interface IEditNipModal {
  onClose: () => void;
  handleSave: (companyCountry: string, companyNip: number) => void;
  companyCountry: string;
  companyNip: number;
  isOpen: boolean;
}
export const EditNipModal: FC<IEditNipModal> = ({
  onClose,
  handleSave,
  companyCountry,
  companyNip,
  isOpen,
}) => {
  const [nipDetails, updateNieDetails] = useState({
    companyNip,
  });
  const updateBillingInfo = () => {
    handleSave(companyCountry, nipDetails.companyNip as number);
  };
  const updateValue = (name: string, value: string | number) => {
    updateNieDetails({
      ...nipDetails,
      [name]: value,
    });
  };

  //ToDo check and clear
  return (
    <Modal
      title={`${t(dictionary.editNipModalTitle)}`}
      handleClose={onClose}
      handleConfirm={updateBillingInfo}
      // labelClose={t(dictionary.cancel)}
      // labelConfirm={t(dictionary.save)}
      submitDisabled={!nipDetails.companyNip}
      isOpen={isOpen}
      exitOnEsc={true}
      labels={{
        primary: t(dictionary.save),
        secondary: t(dictionary.cancel),
      }}
    >
      <Input
        label={t(dictionary.companyNip)}
        type="text"
        labelPosition="top"
        value={nipDetails.companyNip.toString()}
        name="companyNip"
        handleChange={(name: string, value: any) =>
          updateValue(name, (value as string).trim())
        }
        prefix={companyCountry}
      />
    </Modal>
  );
};