import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterPendenciaEntregaKit } from "@/requests/CRUD/PendenciaEntregaKit/obterPendenciaEntregaKit";
import { FormatFields, GetGallery } from "@/utils";
import { format } from "date-fns";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "./ImagemConclusaoInstalacao";

const VisualizacaoEntregaKit = ({ dadosCard }: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [entregaKit, setEntregaKit] = useState<any>();
  const [anexos, setAnexos] = useState<any[]>([]);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    Promise.all([
      obterPendenciaEntregaKit({
        id_negocio: dadosCard.id_coleta_cliente,
      }).then((dadosEntrega: any) => {
        const [year, month, day] = dadosEntrega?.data_pendencia_entrega_kit
          ?.split("-")
          ?.map(Number);
        const data = new Date(year, month - 1, day);

        const dataFormat = format(data, "dd/MM/yyyy");
        setEntregaKit({
          ...dadosEntrega,
          data_pendencia_entrega_kit: dataFormat,
        });
        // setEntregaKit(dadosEntrega);
        setAnexos(
          dadosEntrega.anexos.map((anexo: any) => ({
            ...anexo,
            src: "",
          }))
        );
      }),
    ]).finally(() => setIsLoaded(true));
  }, []);

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

  return (
    <div className="max-h-[90vh] overflow-auto">
      <div className="text-lg font-semibold">Entrega do Kit</div>
      <div>
        {isLoaded && entregaKit ? (
          <div className="flex flex-col gap-2 max-h-[65vh] overflow-auto">
            <div>
              Data:{" "}
              <span className="font-medium">
                {FormatFields.formatarDataHora(
                  entregaKit.data_pendencia_entrega_kit,
                  "dd/mm/AAAA"
                )}
              </span>
            </div>
            <div>
              Recebedor:{" "}
              <span className="font-medium">
                {entregaKit.nome_recebedor_pendencia_entrega_kit}
              </span>
            </div>
            <div>
              Observações:{" "}
              <span className="font-medium">
                {entregaKit.observacoes_pendencia_entrega_kit}
              </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_pendencia_entrega_kit}
                    indexImagem={index}
                    setImagens={setAnexos}
                    onClick={() => openGallery(index)}
                  />
                ))}
                {entregaKit.anexos?.length == 0 && (
                  <div>Não há anexos do Pagamento</div>
                )}
              </div>
            </div>
          </div>
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default VisualizacaoEntregaKit;