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

const ItemVisualizacaoPendenciaEngenharia = ({
  item,
  indexItem,
  dadosCard,
}: {
  [x: string]: any;
}) => {
  const [anexos, setAnexos] = useState<any[]>(item.anexos || []);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    if (!item) {
      // setItem({
      //   ...item,
      // });
      setAnexos(
        item.anexos.map((anexo: any) => ({
          ...anexo,
          src: "",
        }))
      );
    }
  }, []);

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

  return (
    <fieldset
      className="flex flex-col border-black/25 border rounded p-2 px-3 w-full"
      style={{ minInlineSize: "unset" }}
    >
      <legend className="font-bold p-2 flex flex-row items-center max-w-[100%]">
        <div className="whitespace-nowrap text-ellipsis truncate">
          {item.nome_item_checklist_engenharia}
        </div>
      </legend>
      <div>
        <div>
          <div>
            Observações:{" "}
            <span className="font-medium">
              {item.observacao_item_checklist_engenharia}
            </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_item_checklist_engenharia_negocio
                  }
                  indexImagem={index}
                  setImagens={setAnexos}
                  onClick={() => openGallery(index)}
                />
              ))}
              {item.anexos?.length == 0 && (
                <div>Não há anexos</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  );
};

export default ItemVisualizacaoPendenciaEngenharia;