import { FormatFields, GetGallery } from "@/utils";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "../lead/modal/ImagemConclusaoInstalacao";
const ItemPagamentoCliente = ({ itemPagamento }: any) => {
  const [anexos, setAnexos] = useState<any[]>([]);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    setAnexos(
      itemPagamento.anexos.map((anexo: any) => ({
        ...anexo,
        src: "",
      }))
    );
  }, []);

  useEffect(() => {
    setGallery(
      anexos.map((anexo) => ({
        src: anexo.src,
        name: anexo.caminho_anexo_pendencia_entrega_kit?.split("/").pop(),
      }))
    );
  }, [anexos]);

  return (
    <div className="flex flex-col gap-2 max-h-[65vh] overflow-auto">
      <div>
        Data Pagamento:
        <span className="font-medium">
          {FormatFields.formatarDataHora(
            itemPagamento.data_pagamento_cliente,
            "dd/mm/AAAA"
          )}
        </span>
      </div>
      <div>
        Observações:{" "}
        <span className="font-medium">
          {itemPagamento.obs_pagamento_cliente}
        </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">
          {anexos?.map((anexo: any, index: number) => (
            <ImagemConclusaoNegocio
              key={index}
              caminho={anexo.caminho_anexo_pagamento_cliente}
              indexImagem={index}
              setImagens={setAnexos}
              onClick={() => openGallery(index)}
            />
          ))}
          {itemPagamento.anexos?.length == 0 && (
            <div>Não há anexos do Pagamento</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ItemPagamentoCliente;