import LoaderSun from "@/components/common/Loader/LoaderSun";
import Container from "@/components/Forms/Container";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarInstBancarias } from "@/requests/CRUD/InstBancarias/listarInstBancarias";
import { cadastrarInstituicaoFinanceira } from "@/requests/CRUD/InstituicaoFinanceira/cadastrarInstituicao";
import { editarInstituicao } from "@/requests/CRUD/InstituicaoFinanceira/editarInstituicao";
import { listarInstituicao } from "@/requests/CRUD/InstituicaoFinanceira/listarInstituicao";
import { FormatFields } from "@/utils";
import { useCallback, useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import FormInstituicao from "../CXESCAD006/FormInstituicao";
//
const ConsultaInstituicaoFinanceira = () => {
  const arrayTaxas = [6, 12, 24, 36, 48, 60, 72, 84, 96, 108, 120];
  const [instBancarias, setInstBancarias] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const columns = [
    {
      header: "ID",
      accessorKey: "id_inst",
    },
    // {
    //   header: "Código",
    //   accessorKey: "codigo_inst",
    // },
    {
      header: "Nome",
      accessorKey: "nome_inst",
    },
    {
      header: "Instituição Financeira",
      accessorKey: "nome_banco",
    },
    {
      header: "IOF (%)",
      accessorKey: "iof_inst",
    },
    {
      header: "Juros (PF)",
      accessorKey: "jurosPF_inst",
    },
    {
      header: "Max. Parcelas (PF)",
      accessorKey: "parcelasPF_inst",
    },
    {
      header: "Juros (PJ)",
      accessorKey: "jurosPJ_inst",
    },
    {
      header: "Max. Parcelas (PJ)",
      accessorKey: "parcelasPJ_inst",
    },
    {
      header: "Status Instituição",
      accessorKey: "status_inst",
    },
  ];

  useEffect(() => {
    Promise.all([listarInstBancarias().then(setInstBancarias)]).finally(() =>
      setIsLoaded(true)
    );
  }, []);

  const formatInstituicao = async (arr: any) => {
    return arr.map((estimativa: any) => {
      const banco = instBancarias?.find(
        (banco) =>
          banco.id_inst_bancaria == estimativa["cod_inst_bancaria_inst"]
      );
      estimativa[`jurosPF_inst`] =
        FormatFields.formatarNumero(estimativa[`jurosPF_inst`]) + "%";
      estimativa[`jurosPJ_inst`] =
        FormatFields.formatarNumero(estimativa[`jurosPJ_inst`]) + "%";
      estimativa["nome_banco"] = banco
        ? `${banco?.codCompensacao_inst_bancaria ? `${banco?.codCompensacao_inst_bancaria} - ` : ""}${banco?.nome_inst_bancaria}`
        : "";
      return estimativa;
    });
  };

  const onSubmitFunction = async (data: FieldValues) => {
    data["codigo_inst"];
    data["nome_inst"];
    data["jurosPF_inst"] = FormatFields.desformatarNumeros(
      data["jurosPF_inst"]
    );
    data["jurosPJ_inst"] = FormatFields.desformatarNumeros(
      data["jurosPJ_inst"]
    );
    data["iof_inst"] = FormatFields.desformatarNumeros(data["iof_inst"]);

    return cadastrarInstituicaoFinanceira(data);
  };

  const sendEditarEstimativa = async (data: any) => {
    // data["valor_estimativa"] = FormatFields.desformatarNumeros(
    //     data["valor_estimativa"]
    // );
    data[`jurosPF_inst`] = FormatFields.desformatarNumeros(
      data[`jurosPF_inst`]
    );
    data[`jurosPJ_inst`] = FormatFields.desformatarNumeros(
      data[`jurosPJ_inst`]
    );
    data["iof_inst"] = FormatFields.desformatarNumeros(data["iof_inst"]);
    return editarInstituicao(data);
  };

  const CustomForm = useCallback(
    (props: any) => (
      <FormInstituicao {...props} instBancarias={instBancarias} />
    ),
    [instBancarias]
  );

  return (
    <>
      {/*
       * OS: 323047
       * Data: 18/04/2024
       * Leonardo
       */
      /* <Breadcrumb pageName='Consulta Instituição Financeira' /> */}
      {isLoaded ? (
        <Container>
          <ReactTable
            columns={columns}
            listFunction={listarInstituicao}
            formatFunction={formatInstituicao}
            idCol="id_inst"
            isActiveCol="status_inst"
            canEdit
            canDesactive
            editFunction={sendEditarEstimativa}
            createFunction={onSubmitFunction}
            Form={CustomForm}
            pageName="Juros de Instituições Financeiras"
          />
        </Container>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default ConsultaInstituicaoFinanceira;