import Button from "@/components/Forms/Button";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useAuth } from "@/src/contexts/authContext";
import { formatarValor, GetForm } from "@/utils";
import "katex/dist/katex.min.css";
import { useState } from "react";
import InputsFormPagamentoProposta from "./InputsFormPagamentoProposta";

export default function FormPagamentoProposta({
  condicoesPagamento,
  formasPagamento,
  loja,
  contasBancariasLojas,
  dadosCard,
  proposta,
  condicaoPagamentoCustom,
  onSubmitFunction,
  formaPagamentoPadrao,
}: any) {
  const [isLoading, setIsLoading] = useState(false);
  const [valorTotalProjeto, setValorTotalProjeto] = useState<any>("");
  const [saldoDevedorPersonalizado, setSaldoDevedorPersonalizado] =
    useState<any>(undefined);
  const [handleSubmits, setHandleSubmits] = useState<any[]>([]);

  const { handleSubmit: handlePagamento, ...formPagamento } = GetForm();
  const { usuario } = useAuth();

  async function onSubmitFormPagamentoProposta(data: any, event?: any) {
    // Só bloqueia quando falta pagar (saldo positivo). Pagar a mais que o
    // saldo devedor com juros é permitido, só segue com o salvamento.
    if (saldoDevedorPersonalizado !== undefined && saldoDevedorPersonalizado > 0.01) {
      handleSweetAlert({
        icon: "warning",
        title: "Parcelas não fecham o saldo devedor",
        html: `Ainda falta pagar <b>${formatarValor(
          saldoDevedorPersonalizado,
        )}</b> considerando os juros até a última parcela`,
        showDenyButton: false,
        confirmButtonText: "Ok",
      });
      return;
    }

    setIsLoading(true);

    // Cada InputParcelaPersonalizada tem seu próprio form (GetForm próprio),
    // então precisa validar cada um separadamente antes de seguir com o submit.
    return Promise.all(
      handleSubmits.map(
        (handleSubmitParcela) =>
          new Promise((resolve, reject) => {
            handleSubmitParcela((d: any) => resolve(d))(event).finally(() =>
              reject(false),
            );
          }),
      ),
    )
      .then(() => {
        data["id_proposta"] = proposta?.id_proposta;
        data["cliente_proposta"] = proposta?.cliente_proposta;
        return onSubmitFunction(data).finally(() => setIsLoading(false));
      })
      .catch(() => {
        setIsLoading(false);
      });
  }

  return (
    <div className="mt-5">
      <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
        <span>
          Valor do projeto{" "}
          <strong>
            <i>{formatarValor(proposta?.valorTotal_proposta)}</i>
          </strong>
        </span>
      </div>
      {formatarValor(valorTotalProjeto) !=
        formatarValor(proposta?.valorTotal_proposta) && (
        <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
          <span>
            Valor do projeto com juros{" "}
            <strong>
              <i>{formatarValor(valorTotalProjeto)}</i>
            </strong>
          </span>
        </div>
      )}

      <InputsFormPagamentoProposta
        condicoesPagamento={condicoesPagamento}
        formasPagamento={formasPagamento}
        loja={loja}
        condicaoPagamentoCustom={condicaoPagamentoCustom}
        contasBancariasLojas={contasBancariasLojas}
        dadosCard={dadosCard}
        proposta={proposta}
        formaPagamentoPadrao={formaPagamentoPadrao}
        form={formPagamento}
        usuario={usuario}
        setValorTotalProjeto={setValorTotalProjeto}
        setSaldoDevedorPersonalizado={setSaldoDevedorPersonalizado}
        setHandleSubmits={setHandleSubmits}
      />
      <Button
        loading={isLoading}
        className="w-full bg-primary mt-5"
        onClick={handlePagamento(onSubmitFormPagamentoProposta)}
      >
        Confirmar
      </Button>
    </div>
  );
}