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 ImagemConclusaoNegocio = ({
  caminho,
  setImagens,
  indexImagem,
  ...rest
}: {
  caminho: string;
  setImagens: Dispatch<SetStateAction<any[]>>;
  indexImagem: number;
  [x: string]: any;
}) => {
  const [imagemUrl, setImagemUrl] = useState("");
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    baixarAws(caminho)
      .then((res) => {
        setImagens((prev: any) => {
          const newImagens = [...prev];
          newImagens.splice(indexImagem, 1, {
            ...newImagens[indexImagem],
            src: res,
          });
          return newImagens;
        });
        setImagemUrl(res);
      })
      .finally(() => setIsLoaded(true));
  }, []);

  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 ImagemConclusaoNegocio;