import { useAuth } from "@/src/contexts/authContext";
import {
  calcularParcelaPrice,
  formatarValor,
  FormatFields,
  getDateBrasil,
} from "@/utils";
import "katex/dist/katex.min.css";
import { useEffect, useState } from "react";
import InputsFormPagamentoProposta from "../InputsFormPagamentoProposta";

export default function FormPagamentoManutencoesProposta({
  formasPagamento,
  loja,
  contasBancariasLojas,
  dadosCard,
  proposta,
  condicaoPagamentoCustom,
  // onSubmitFunction,
  formaPagamentoPadrao,
  form,
  camposPersonalizados,
}: any) {
  const [isLoading, setIsLoading] = useState(false);
  const [formaPagamentoSelecionada, setFormaPagamentoSelecionada] = useState(
    // loja && loja?.forma_pagamento_padrao_loja
    proposta?.codForma_pagamento_proposta || formaPagamentoPadrao,
  );
  const [dataPriVcto_pagamento_proposta, setDataPriVcto_pagamento_proposta] =
    useState(getDateBrasil(undefined, undefined, "fr-CA"));
  const [valor_entrada_proposta, setValor_entrada_proposta] = useState<any>("");
  const [valorTotalProjeto, setValorTotalProjeto] = useState<any>("");

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

  function atualizaCondicaoDePagamento() {
    const parcelas: string[] = [];

    if (dataPriVcto_pagamento_proposta) {
      const primeiroVencimento = dataPriVcto_pagamento_proposta;
      parcelas.push(
        FormatFields.formatarDataCalendar(
          new Date(primeiroVencimento?.split("-") as any),
        ),
      );

      const forma = formasPagamento?.find(
        (formaPagamento: any) =>
          formaPagamento.id_forma == formaPagamentoSelecionada,
      );

      if (forma?.prazos_forma) {
        const prazos_forma = forma?.prazos_forma?.split(",");
        if (prazos_forma?.length > 0) {
          prazos_forma?.map((prazo: any) => {
            const dataPrazo = new Date(primeiroVencimento?.split("-") as any);
            dataPrazo.setDate(dataPrazo.getDate() + Number(prazo));
            parcelas.push(FormatFields.formatarDataCalendar(dataPrazo));
          });
        }
      }

      if (parcelas?.length > 0) {
        const valorParcelamento =
          +proposta?.valorTotal_proposta - Number(valor_entrada_proposta);
        const qtdParcelas = (forma?.prazos_forma || "")?.split(",")?.length;
        const taxa_juros_forma = Number(forma?.taxa_juros_forma);
        const valor_das_parcelas = calcularParcelaPrice(
          valorParcelamento,
          taxa_juros_forma,
          qtdParcelas,
        );

        setValorTotalProjeto(
          Number(valor_entrada_proposta) + valor_das_parcelas * qtdParcelas,
        );

        let condicaoDePagamento = "";

        if (forma?.tipo_forma == "0") {
          condicaoDePagamento = `Pagamento ${forma?.nome_forma} no valor de ${formatarValor(
            Number(valor_entrada_proposta),
          )} na data ${parcelas?.join(", ")}`;
        } else {
          condicaoDePagamento = `Pagamento ${forma?.nome_forma} ${
            Number(valor_entrada_proposta) > 0
              ? `com entrada de ${formatarValor(
                  Number(valor_entrada_proposta),
                )} na data ${parcelas?.[0]}${
                  valor_das_parcelas == 0
                    ? ""
                    : ` mais ${qtdParcelas} parcela${
                        qtdParcelas > 1 ? "s" : ""
                      } de ${formatarValor(
                        valor_das_parcelas,
                      )} ${qtdParcelas > 1 ? `nas datas` : `na data`} ${parcelas
                        ?.slice(1)
                        ?.join(", ")}`
                }`
              : `com valor de ${formatarValor(
                  valor_das_parcelas,
                )} ${qtdParcelas > 1 ? `nas datas` : `na data`} ${parcelas
                  ?.slice(1)
                  ?.join(", ")}`
          }`;
        }

        // const condicaoDePagamento = `Pagamento ${forma?.nome_forma} ${parcelas?.length > 1 ? "nas datas" : "na data"} ${parcelas?.join(", ")}`;
        formPagamento.setValue(
          "informacoes_pagamento_proposta",
          condicaoDePagamento,
        );
      }
    }
  }

  useEffect(() => {
    if (valor_entrada_proposta === "" && formaPagamentoSelecionada) {
      const forma = formasPagamento?.find(
        (formaPagamento: any) =>
          formaPagamento.id_forma == formaPagamentoSelecionada,
      );
      if (forma) {
        setValor_entrada_proposta(
          forma?.tipo_forma == "0" ? proposta?.valorTotal_proposta : "0",
        );
        formPagamento?.setValue(
          "valor_entrada_proposta",
          forma?.tipo_forma == "0"
            ? FormatFields.formatarNumero(proposta?.valorTotal_proposta)
            : "0,00",
        );
      }
    } else {
      atualizaCondicaoDePagamento();
    }
  }, [
    formaPagamentoSelecionada,
    dataPriVcto_pagamento_proposta,
    formasPagamento,
    valor_entrada_proposta,
  ]);

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

  // async function onSubmitFormPagamentoProposta(data: any) {
  //   setIsLoading(true);
  //   data["id_proposta"] = proposta?.id_proposta;
  //   data["cliente_proposta"] = proposta?.cliente_proposta;
  //   if (
  //     formaPagamentoPadrao !=
  //     data?.codForma_pagamento_proposta
  //   ) {
  //     data["forma_pagamento_atualizada"] = true;
  //   }
  //   return onSubmitFunction(data).finally(() => 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>
          Por favor, preencha a{" "}
          <strong>
            <i>Condição de Pagamento</i>
          </strong>
        </span>
      </div> */}
      <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
        formasPagamento={formasPagamento}
        loja={loja}
        contasBancariasLojas={contasBancariasLojas}
        dadosCard={dadosCard}
        proposta={proposta}
        formaPagamentoPadrao={formaPagamentoPadrao}
        form={form}
        usuario={usuario}
        setFormaPagamentoSelecionada={setFormaPagamentoSelecionada}
        setValor_entrada_proposta={setValor_entrada_proposta}
        formaPagamentoSelecionada={formaPagamentoSelecionada}
        setDataPriVcto_pagamento_proposta={setDataPriVcto_pagamento_proposta}
      />
      {camposPersonalizados}
    </div>
  );
}