import LoaderSun from "@/components/common/Loader/LoaderSun";
import { GetGallery } from "@/utils";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "./ImagemConclusaoInstalacao";

import { format, isValid, parseISO } from "date-fns";
import { ptBR } from "date-fns/locale";

const PagamentoCliente = ({ dadosNegocio }: any) => {
  const [pagamento, setPagamento] = useState<any>();
  const [isLoaded, setIsLoaded] = useState(false);
  const [imagens, setImagens] = useState<any[]>([]);

  const { openGallery, setGallery } = GetGallery();

  const formatarData = (dataString: any) => {
    try {
      const data = parseISO(dataString);
      if (isValid(data)) {
        return format(data, "dd/MM/yyyy", { locale: ptBR });
      }
      return "Data inválida";
    } catch (error) {
      console.error("Erro ao formatar data:", error);
      return "Data inválida";
    }
  };

  useEffect(() => {
    // if (!pagamento) {
    //   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,
    //       });
    //       setImagens(
    //         res.anexos.map((imagem: any) => ({
    //           ...imagem,
    //           src: "",
    //         }))
    //       );
    //     })
    //     .finally(() => setIsLoaded(true));
    // } else {
    //   setIsLoaded(true);
    // }

    if (dadosNegocio?.anexoPagamentoCliente_coleta) {
      setImagens([
        {
          src: "",
          name: dadosNegocio?.anexoPagamentoCliente_coleta?.split("/").pop(),
        },
      ]);
    }
    setIsLoaded(true);
  }, []);

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

  return (
    <div className="max-h-[90vh] overflow-auto">
      {isLoaded ? (
        <div className="space-y-4">
          <div className="flex items-center space-x-2">
            <span className="font-semibold text-gray-700">Data Pagamento:</span>
            <span className="text-gray-900">
              {formatarData(dadosNegocio.dataPagamentoCliente_coleta)}
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <span className="font-semibold text-gray-700">Observação:</span>
            <span className="text-gray-900">
              {dadosNegocio.obsPagamentoCliente_coleta}
            </span>
          </div>
          {dadosNegocio.anexoPagamentoCliente_coleta && (
            <div className="flex flex-col space-y-2">
              <span className="font-semibold text-gray-700">Imagem:</span>
              {/* <img
                src={dadosNegocio.anexoPagamentoCliente_coleta}
                alt="Anexo"
                className="mt-2 rounded shadow-lg w-64 h-auto object-cover"
              /> */}
              <ImagemConclusaoNegocio
                caminho={dadosNegocio.anexoPagamentoCliente_coleta}
                indexImagem={0}
                setImagens={setImagens}
                onClick={() => openGallery(0)}
              />
            </div>
          )}
        </div>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default PagamentoCliente;