import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormCondicaoPagamento = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [options, setOptions] = useState(
    (defaultValues &&
      defaultValues["parcela_condicao_pagamento"]
        ?.split(",")
        .map((option: any) => ({
          label: option == "0" ? "A vista" : option,
          value: option,
        }))) ||
      []
  );

  useEffect(() => {
    form.setValue("parcela_condicao_pagamento", options);
  }, [options]);

  return (
    <form
      onSubmit={handleSubmit((data: any) => {
        data["parcela_condicao_pagamento"] =
          data.parcela_condicao_pagamento?.join(",");
        onSubmitFunction(data);
      })}
      {...rest}
    >
      <InputGroup>
        <InputSelectComponent
          name="parcela_condicao_pagamento"
          label="Condição"
          formulario={form}
          error={"Informe a Condição"}
          required
          defaultValue={
            defaultValues && defaultValues["parcela_condicao_pagamento"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "parcela_condicao_pagamento"
          )}
          isMulti
          options={options}
          creatable
          skipEffect
          validateCreateOption={(inputValue: string, inputOptions?: any[]) => {
            if (inputOptions?.some((option) => option.value == inputValue)) {
            }
            if (/^\d+$/.test(inputValue)) {
              form.clearErrors("parcela_condicao_pagamento");
              return {
                label: inputValue == "0" ? "A vista" : inputValue,
                value: inputValue,
              };
            }
            form.setError("parcela_condicao_pagamento" as `root.${string}`, {
              type: "manual",
              message: "Apenas números",
            });
            return false;
          }}
        />
      </InputGroup>
      {children}
    </form>
  );
};

export default FormCondicaoPagamento;