import { FormatFields, GetForm } from "@/utils";
import { useEffect, useState } from "react";
import * as yup from "yup";
import Input from "../Forms/Input";
import InputGroup from "../Forms/InputGroup";
import InputSelectComponent from "../Forms/InputSelect";

const FormSimuladorFinanciamento = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  instituicoes,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<yup.ObjectSchema<{}, yup.AnyObject, {}, "">>(
    yup.object().shape({})
  );

  const [valorInvestimento, setValorInvestimento] = useState<any>("0,00");

  useEffect(() => {
    calcularValorFinanciado(form.control._formValues["entrada_porcentagem"] || "0,00");
  }, [valorInvestimento]);

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  function calcularValorFinanciado(entradaP: any = undefined, entradaA: any = undefined) {
    const valorI: number = Number(FormatFields.desformatarNumeros(valorInvestimento));
    if (entradaP) {
      entradaP = Number(FormatFields.desformatarNumeros(entradaP));
      const valorFinanciamento = (entradaP / 100) * valorI;
      form.setValue(
        "entrada_absoluto" as never,
        valorFinanciamento.toLocaleString("pt-BR", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }) as never
      );
      form.setValue(
        "financiado" as never,
        (valorI - valorFinanciamento).toLocaleString("pt-BR", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }) as never
      );
    }
    if (entradaA) {
      entradaA = Number(FormatFields.desformatarNumeros(entradaA));
      const valorFinanciamento = valorI - entradaA;
      form.setValue(
        "financiado" as never,
        valorFinanciamento.toLocaleString("pt-BR", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }) as never
      );
      form.setValue(
        "entrada_porcentagem" as never,
        ((entradaA * 100) / valorI).toLocaleString("pt-BR", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }) as never
      );
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
      <InputGroup>
        {defaultValues && defaultValues["id_cliente"] && (
          <InputSelectComponent
            name="proposta"
            label="Proposta"
            formulario={form}
            options={[]}
          />
        )}
        <InputSelectComponent
          name="instituicoes"
          label="Instituições Financeiras"
          formulario={form}
          options={instituicoes.map((instituicao: any) => ({
            label: instituicao.nome_inst,
            value: instituicao.id_inst,
          }))}
          isMulti
        />
        <InputSelectComponent
          name="tipo_pessoa"
          label="Pessoa"
          formulario={form}
          options={[
            { label: "Física", value: "PF" },
            { label: "Jurídica", value: "PJ" },
          ]}
          required
          error="Selecione o tipo de pessoa"
          defaultValue={defaultValues && defaultValues["tipo_pessoa"]}
        />
      </InputGroup>
      <InputGroup>
        <Input
          label="Carência (meses)"
          name="carencia"
          mascara="numerico"
          formulario={form}
          maxLength={2}
        />
        <Input
          label="Valor do Investimento (R$)"
          name="investimento"
          prefix="R$"
          mascara="numero"
          formulario={form}
          required
          error="Informe o valor do investimento"
          onChange={(e: any) => setValorInvestimento(e.target.value)}
        />
      </InputGroup>
      <InputGroup>
        <Input
          label="Valor de Entrada (%)"
          name="entrada_porcentagem"
          mascara="numero"
          formulario={form}
          onChange={(e: any) => calcularValorFinanciado(e.target.value)}
          defaultValue="0,00"
        />
        <Input
          label="Valor de Entrada (R$)"
          name="entrada_absoluto"
          prefix="R$"
          mascara="numero"
          formulario={form}
          onChange={(e: any) => calcularValorFinanciado(undefined, e.target.value)}
        />
        <Input
          label="Valor Financiado (R$)"
          name="financiado"
          prefix="R$"
          mascara="numero"
          disabled
          formulario={form}
        />
      </InputGroup>
      {children}
    </form>
  );
};

export default FormSimuladorFinanciamento;