import React, { FC, useState } from "react";
import { Form, Modal } from "venice-ui";
import { getLang, t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { checkCompanyDetails, checkCompanyDetailsWithoutNip } from "../PasswordCheck/checks";
import { getCountryScopeByLang } from "../../helpers/countryHelpers";
import { read } from "fs";
import { isDisabled } from "@testing-library/user-event/dist/utils";

interface IEditBillingModal {
  onClose: () => void;
  handleSave: (
    companyAdressLine1: string,
    companyCity: string,
    companyCountry: string,
    companyName: string,
    companyPostCode: string
  ) => void;
  companyName: string;
  companyAdressLine1: string;
  companyPostCode: string;
  companyCity: string;
  companyCountry: string;
  isOpen: boolean;
}
export const EditBillingModal: FC<IEditBillingModal> = ({
  onClose,
  handleSave,
  companyAdressLine1,
  companyCity,
  companyCountry,
  companyName,
  companyPostCode,
  isOpen,
}) => {
  const [billingAddress, updateBillingAddress] = useState({
    companyAdressLine1,
    companyCity,
    companyCountry,
    companyName,
    companyPostCode,
  });
  const updateBillingInfo = () => {
    handleSave(
      billingAddress.companyAdressLine1,
      billingAddress.companyCity,
      billingAddress.companyCountry,
      billingAddress.companyName,
      billingAddress.companyPostCode
    );
  };
  const updateValue = (name: string, value: string | number) => {
    updateBillingAddress({
      ...billingAddress,
      [name]: value,
    });
  };

  const editForm = {
    action: updateValue,
    data: [
      {
        row: [
          {
            type: "text",
            label: t(dictionary.companyName),
            value: billingAddress.companyName,
            name: "companyName",
            autofocus: true,
          },
        ],
      },
      {
        row: [
          {
            type: "text",
            label: t(dictionary.companyAdressLine1),
            value: billingAddress.companyAdressLine1,
            name: "companyAdressLine1",
          },
        ],
      },
      {
        row: [
          {
            type: "text",
            label: t(dictionary.companyPostCode),
            value: billingAddress.companyPostCode,
            name: "companyPostCode",
          },
          {
            type: "text",
            label: t(dictionary.companyCity),
            value: billingAddress.companyCity,
            name: "companyCity",
          },
        ],
      },
      {
        row: [
          {
            type: "select",
            label: t(dictionary.companyCountry),
            value: billingAddress.companyCountry,
            options: getCountryScopeByLang(getLang(navigator.language)),
            zIndex: 1000,
            height:'100px',
            position: "left",
            name: "companyCountry",
            isDisabled: true,
          },
        ],
      },
    ],
  };

  return (
    <Modal
      title={`${t(dictionary.editBillingAddressModalTitle)}`}
      handleClose={onClose}
      handleConfirm={updateBillingInfo}
      headerDivader={true}
      submitDisabled={checkCompanyDetailsWithoutNip(
        billingAddress.companyName,
        billingAddress.companyAdressLine1,
        billingAddress.companyPostCode,
        billingAddress.companyCity,
        billingAddress.companyCountry,
      )}
      isOpen={isOpen}
      exitOnEsc={true}
      labels={{
        primary: t(dictionary.save),
        secondary: t(dictionary.cancel),
      }}
    >
      <Form formData={editForm} />
    </Modal>
  );
};