import LoaderSun from "@/components/common/Loader/LoaderSun";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import { obterConclusaoInstalacao } from "@/requests/CRM/AgendamentosInstalacoes/obterConclusaoInstalacao";
import { obterPagamentoInstalacao } from "@/requests/CRM/AgendamentosInstalacoes/obterPagamentoInstalacao";
import { FormatFields, GetGallery } from "@/utils";
import { format, parseISO } from "date-fns";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "./ImagemConclusaoInstalacao";

const PagamentoInstalacao = ({ dadosCard, ...rest }: any) => {
  const [pagamento, setPagamento] = useState<any>();
  const [isLoaded, setIsLoaded] = useState(false);
  const [imagens, setImagens] = useState<any[]>([]);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    if (!pagamento) {
      var data_instalacao = "";
      var data_conclusao = "";
      var valor_conclusao = "";
      var valor_proposta = "";
      Promise.all([
        obterAgendamentoInstalacaoNegocio(dadosCard.id_coleta_cliente)
          .then((res) => {
            const data = res?.data_instalacao;
            var dataInicial = parseISO(data);

            data_instalacao = format(dataInicial, "dd/MM/yyyy");
          })
          .finally(() => {}),
        obterConclusaoInstalacao(dadosCard.id_coleta_cliente)
          .then((res) => {
            const data = res.data_conclusao_instalacao;
            var dataInicial = parseISO(data);

            data_conclusao = format(dataInicial, "dd/MM/yyyy");

            valor_conclusao = `R$ ${FormatFields.formatarNumero(res.valorServicos_conclusao_instalacao)}`;
          })
          .finally(() => {}),
        baixarAwsContent(
          dadosCard.propostas.find((prop: any) => prop.status_proposta == 1)
            .caminho_resultadoPrecificacao_proposta
        ).then((resultadoPrecificacao_proposta) => {
          const resultPreco = JSON.parse(resultadoPrecificacao_proposta);

          valor_proposta = `R$ ${FormatFields.formatarNumero(resultPreco.valor_servico)}`;
        }),
      ]).then(() => {
        obterPagamentoInstalacao(dadosCard.id_coleta_cliente)
          .then((res) => {
            const [yearPagamento, monthPagamento, dayPagamento] =
              res?.data_pagamento_instalacao.split("-").map(Number);
            const [yearConclusao, monthConclusao, dayConclusao] =
              res?.conclusao?.data_conclusao_instalacao.split("-").map(Number);
            const [year, month, day] =
              res?.conclusao.agendamento?.data_instalacao
                .split("-")
                .map(Number);
            const dataPagamento = new Date(
              yearPagamento,
              monthPagamento - 1,
              dayPagamento
            );
            const dataConclusao = new Date(
              yearConclusao,
              monthConclusao - 1,
              dayConclusao
            );
            const data = new Date(year, month - 1, day);

            const dataFormatPagamento = format(dataPagamento, "dd/MM/yyyy");
            const dataFormatConclusao = format(dataConclusao, "dd/MM/yyyy");
            const dataFormat = format(data, "dd/MM/yyyy");
            setPagamento({
              ...res,
              conclusao: {
                ...res.conclusao,
                data_conclusao_instalacao: dataFormatConclusao,
                agendamento: {
                  ...res.conclusao.agendamento,
                  data_instalacao: dataFormat,
                },
              },
              data_pagamento_instalacao: dataFormatPagamento,
              data_instalacao: data_instalacao,
              data_conclusao: data_conclusao,
              valor_pago: `R$ ${FormatFields.formatarNumero(res.valor_pagamento_instalacao)}`,
              valor_proposta: valor_proposta,
              valor_conclusao: valor_conclusao,
            });

            setImagens(
              res.anexos.map((imagem: any) => ({
                ...imagem,
                src: "",
              }))
            );
          })
          .finally(() => setIsLoaded(true));
      });
    } else {
      setIsLoaded(true);
    }
  }, []);

  useEffect(() => {
    setGallery(
      imagens.map((imagem) => ({
        src: imagem.src,
        name: imagem.caminho_imagem_conclusao_instalacao?.split("/").pop(),
      }))
    );
  }, [imagens]);

  return (
    <div className="max-h-[90vh] overflow-auto">
      <div className="text-lg font-semibold">Pagamento</div>
      {isLoaded ? (
        <div>
          <div>
            <div>
              Data Agendamento:{" "}
              <span className="font-medium">{pagamento.data_instalacao}</span>
            </div>
            <div>
              Data Conclusão:{" "}
              <span className="font-medium">{pagamento.data_conclusao}</span>
            </div>
            <div>
              Data Pagamento:{" "}
              <span className="font-medium">
                {pagamento.data_pagamento_instalacao}
              </span>
            </div>

            <div>
              Custo do Serviço na Proposta:{" "}
              <span className="font-medium">{pagamento.valor_proposta}</span>
            </div>

            <div>
              Custo do Serviço na Conclusão da Instalação:{" "}
              <span className="font-medium">{pagamento.valor_conclusao}</span>
            </div>

            <div>
              Valor do Pagamento:{" "}
              <span className="font-medium">{pagamento.valor_pago}</span>
            </div>

            <div>
              Observações:{" "}
              <span className="font-medium">
                {pagamento.observacoes_pagamento_instalacao}
              </span>
            </div>
            <div>
              <div>Anexos</div>
              <div className="flex flex-row flex-wrap gap-y-3 gap-x-2 justify-evenly max-h-[20vh] overflow-auto">
                {imagens?.map((anexo: any, index: number) => (
                  <ImagemConclusaoNegocio
                    key={index}
                    caminho={anexo.caminho_anexo_pagamento_instalacao}
                    indexImagem={index}
                    setImagens={setImagens}
                    onClick={() => openGallery(index)}
                  />
                ))}
                {pagamento.anexos?.length == 0 && (
                  <div>Não há anexos do Pagamento</div>
                )}
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default PagamentoInstalacao;