import { useTranslation } from "react-i18next";
import FormField from "../components/FormField";
import FormInput from "../components/FormInput";
import FormSelect from "../components/FormSelect";
import Button from "../components/Button";
import FormBox from "../components/FormBox";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useToast } from "../hooks/useToast";
import FieldsWrapper from "../components/FieldsWrapper";

function ChargeManagement() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const showToast = useToast();

  const [productDetails, setProductDetails] = useState({
    productCode: "",
    interestCategory: "",
    productCodeValid: true,
    interestCategoryValid: true,
  });

  const formFields = [
    {
      name: "productCode",
      label: t("productCode"),
      type: "input",
      subType: "number",
      maxLength: 4,
      validate: (value) => /^[0-9]{4}/.test(value),
    },
    {
      name: "interestCategory",
      label: t("interestCategory"),
      type: "input",
      subType: "number",
      maxLength: 4,
      validate: (value) => /^[0-9]{4}/.test(value),
    },
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    const newProductDetails = { ...productDetails };
    let isValid = true;

    formFields.forEach((field) => {
      if (!field.validate(newProductDetails[field.name])) {
        isValid = false;
        newProductDetails[`${field.name}Valid`] = false;
      }
    });

    if (!isValid) {
      setProductDetails(newProductDetails);
      showToast(t("highlightedFieldsInvalid"), "error");
      return;
    }

    navigate("change", {
      state: {
        productCode: productDetails.productCode,
        interestCategory: productDetails.interestCategory,
      },
    });
  };

  const renderField = (field) => {
    const commonProps = {
      value: productDetails[field.name],
      onChange: (e) => {
        const newLockerDetails = { ...productDetails };
        if (field.subType === "number") {
          e.target.value = e.target.value.replace(/\D/g, "");
          if (e.target.value.length > field.maxLength) {
            return;
          }
        }

        newLockerDetails[field.name] = e.target.value;
        newLockerDetails[`${field.name}Valid`] = true;
        setProductDetails(newLockerDetails);
      },
      maxLength: field.maxLength,
      type: field.subType,
      readOnly: field.readOnly,
    };
    const valid = productDetails[`${field.name}Valid`];
    return (
      <FormField key={field.name} label={field.label} icon={field.icon}>
        {field.type === "input" ? (
          <FormInput
            props={commonProps}
            valid={valid}
          />
        ) : (
          <FormSelect props={commonProps} valid={valid} options={field.options} />
        )}
      </FormField>
    );
  };

  return (
    <FormBox title={t("chargeManagement")}>
      <FieldsWrapper>
        {formFields.map(renderField)}
      </FieldsWrapper>
      <Button text={t("submit")} onClick={handleSubmit} />
    </FormBox>
  );
}

export default ChargeManagement;