import LoaderSun from "@/components/common/Loader/LoaderSun";
import FileRenderer from "@/components/FileRenderer";
import { baixarAws } from "@/requests/common/Aws/baixarAws";
import { Dispatch, SetStateAction, useEffect, useState } from "react";

const ImgAwsGallery = ({
  caminho,
  setImagens,
  indexImagem,
  imagemSrc = "",
  ...rest
}: {
  caminho: string;
  setImagens: Dispatch<SetStateAction<any[]>>;
  indexImagem: number;
  imagemSrc?: string;
  [x: string]: any;
}) => {
  const [imagemUrl, setImagemUrl] = useState(imagemSrc);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    setImagemUrl(imagemSrc);
  }, [imagemSrc]);

  useEffect(() => {
    setIsLoaded(false);
    if (caminho) {
      baixarAws(caminho)
        .then((res) => {
          // Validar se o retorno é uma URL válida
          if (
            res &&
            (res.startsWith("http://") || res.startsWith("https://"))
          ) {
            setImagens((prev: any) => {
              const newImagens = [...prev];
              newImagens.splice(indexImagem, 1, {
                ...newImagens[indexImagem],
                src: res,
              });
              return newImagens;
            });
            setImagemUrl(res);
          } else {
            // Se o retorno for inválido, definir imagemSrc ou vazio
            setImagemUrl(imagemSrc || "");
          }
        })
        .finally(() => setIsLoaded(true));
    } else {
      setImagens((prev: any) => {
        const newImagens = [...prev];
        newImagens.splice(indexImagem, 1, {
          ...newImagens[indexImagem],
          src: imagemSrc,
        });
        return newImagens;
      });
      setIsLoaded(true);
    }
  }, [caminho]);

  return (
    <div
      className="w-40 h-40 flex flex-col justify-center items-center rounded hover:bg-[rgba(0,0,0,0.05)] p-1"
      {...rest}
    >
      <div className="w-full overflow-hidden h-20 flex flex-col items-center justify-center">
        {isLoaded ? (
          <FileRenderer
            src={imagemUrl}
            name={caminho?.split("/").pop()!}
            className={
              "h-full w-30 flex flex-col items-center justify-center bg-animate-pulse bg-white rounded overflow-hidden"
            }
            width={200}
          />
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
      {/* <div className="text-sm w-full h-12 text-wrap text-center overflow-auto">
        <p className="break-all">{caminho.split("/").pop()}</p>
      </div> */}
    </div>
  );
};
export default ImgAwsGallery;