import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import ReactTable from "@/components/ReactTable/ReactTable";
import FormSimuladorFinanciamento from "@/components/SimuladorFinanciamento";
import { listarInstituicao } from "@/requests/CRUD/InstituicaoFinanceira/listarInstituicao";
import { FormatFields, calcularParcela } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaCalculator } from "react-icons/fa";
import { toast } from "react-toastify";

const PaginaSimuladorFinanciamento = () => {
  const [instituicoes, setInstituicoes] = useState<any[]>([]);
  const [financiamentos, setFinanciamentos] = useState<any[]>([]);
  const [tableKey, setTableKey] = useState<number>(1);

  const columns = [
    { header: "Nº Parcelas", accessorKey: "parcela" },
    { header: "Taxa", accessorKey: "taxa" },
    { header: "Valor", accessorKey: "valor_parcela" },
    { header: "Total", accessorKey: "total_parcela" },
  ];

  const numParcelas = [6, 12, 24, 36, 48, 60, 72, 84, 96, 108, 120];

  const onSubmitFinanciamento = (data: FieldValues) => {
    if (
      Number(FormatFields.desformatarNumeros(data["entrada_absoluto"])) >
      Number(FormatFields.desformatarNumeros(data["investimento"]))
    ) {
      return toast.error(
        "Valor de entrada não pode ser superior ao investimento"
      );
    }
    setFinanciamentos(
      instituicoes
        .map((instituicao: any) => ({
          ...data,
          ...instituicao,
          iof_financiado:
            (Number(instituicao.iof_inst) / 100) *
              Number(FormatFields.desformatarNumeros(data.financiado)) +
            Number(FormatFields.desformatarNumeros(data.financiado)),
          valor_carencia:
            (Number(data.carencia) *
              Number(FormatFields.desformatarNumeros(data.investimento))) /
            3600,
        }))
        .filter(
          (instituicao: any) =>
            !data["instituicoes"][0] ||
            data["instituicoes"].includes(instituicao.id_inst)
        )
    );
  };

  const fakeList = async (financiamento: any) => {
    return;
  };

  useEffect(() => {
    listarInstituicao().then((res) => setInstituicoes(res));
  }, []);

  useEffect(() => {}, [financiamentos]);

  useEffect(() => {
    setTableKey(tableKey + 1);
  }, [financiamentos]);

  return (
    <>
      <Breadcrumb pageName="Simulador de Financiamento" />
      <Container className="divide-y-2">
        <FormSimuladorFinanciamento
          onSubmitFunction={onSubmitFinanciamento}
          instituicoes={instituicoes}
          className="pb-2"
        >
          <div className="w-full flex flex-col justify-center items-center">
            <Button className="flex gap-2 flex-nowrap">
              <FaCalculator /> Calcular
            </Button>
          </div>
        </FormSimuladorFinanciamento>
        {financiamentos[0] &&
          financiamentos.map((financiamento, index) => {
            // const taxasDisponiveis = [...arrayTaxas];
            // const chavesJuros = Object.keys(financiamento).filter(chave => chave.includes(`juros${financiamento.tipo_pessoa}`));
            // const valoresJuros = chavesJuros.map(chave => financiamento[chave]).filter(e => +e != 0);
            const parcelas = Object.keys(financiamento)
              .filter((chave) => {
                return (
                  chave.includes(`juros${financiamento.tipo_pessoa}`) &&
                  +financiamento[chave] != 0
                );
              })
              .reduce<any>((novoObjeto, chave) => {
                novoObjeto[chave] = financiamento[chave];
                return novoObjeto;
              }, {});

            return (
              <section key={index} className="p-7 flex flex-col gap-4">
                <div className="w-full flex flex-col items-center font-bold">
                  <div>{financiamento.nome_inst}</div>
                  <div className="text-sm">(Financiamento)</div>
                </div>
                <div className="flex flex-row text-right gap-7 w-full">
                  <table className="financiamentoTable w-full">
                    <tbody>
                      <tr>
                        <td>Valor do Investimento:</td>
                        <td>
                          R${" "}
                          {FormatFields.formatarNumero(
                            financiamento.investimento
                          )}
                        </td>
                      </tr>
                      <tr>
                        <td>Entrada:</td>
                        <td>
                          R${" "}
                          {FormatFields.formatarNumero(
                            financiamento.entrada_absoluto
                          ) || "0,00"}
                        </td>
                      </tr>
                      <tr>
                        <td>Valor Financiado:</td>
                        <td>
                          R${" "}
                          {FormatFields.formatarNumero(
                            financiamento.financiado
                          )}
                        </td>
                      </tr>
                      <tr>
                        <td>IOF:</td>
                        <td>
                          {FormatFields.formatarNumero(financiamento.iof_inst)}%
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table className="financiamentoTable w-full">
                    <tbody>
                      <tr>
                        <td>Valor Financiado + IOF:</td>
                        <td>
                          R${" "}
                          {financiamento.iof_financiado.toLocaleString(
                            "pt-BR",
                            {
                              minimumFractionDigits: 2,
                              maximumFractionDigits: 2,
                            }
                          )}
                        </td>
                      </tr>
                      <tr>
                        <td>Carência em Meses:</td>
                        <td>{financiamento.carencia || "0"}</td>
                      </tr>
                      <tr>
                        <td>Tarifa da Carência:</td>
                        <td>
                          R${" "}
                          {financiamento.valor_carencia.toLocaleString(
                            "pt-BR",
                            {
                              minimumFractionDigits: 2,
                              maximumFractionDigits: 2,
                            }
                          )}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <ReactTable
                  key={tableKey}
                  pageName={financiamento.nome_inst}
                  columns={columns}
                  listFunction={async (): Promise<any[]> =>
                    new Promise((resolve, reject) =>
                      resolve(
                        numParcelas
                          .filter(
                            (parcela) =>
                              parcela <=
                              +financiamento[
                                `parcelas${financiamento.tipo_pessoa}_inst`
                              ]
                          )
                          .map((parcela) => {
                            const valor_parcela =
                              calcularParcela(
                                +financiamento["jurosPF_inst"],
                                +parcela,
                                financiamento.iof_financiado
                              ) + financiamento.valor_carencia;

                            return {
                              parcela: parcela,
                              taxa:
                                (+financiamento[
                                  `juros${financiamento.tipo_pessoa}_inst`
                                ]).toLocaleString("pt-BR", {
                                  minimumFractionDigits: 2,
                                  maximumFractionDigits: 2,
                                }) + "%",
                              valor_parcela:
                                "R$ " +
                                valor_parcela.toLocaleString("pt-BR", {
                                  minimumFractionDigits: 2,
                                  maximumFractionDigits: 2,
                                }),
                              total_parcela:
                                "R$ " +
                                (valor_parcela * +parcela).toLocaleString(
                                  "pt-BR",
                                  {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2,
                                  }
                                ),
                            };
                          })
                      )
                    )
                  }
                  // data={}
                />
              </section>
            );
          })}
      </Container>
    </>
  );
};

export default PaginaSimuladorFinanciamento;