import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarChecklistNegocio } from "@/requests/CRUD/PendenciaEngenharia/listarChecklistNegocio";
import { useEffect, useState } from "react";
import ItemVisualizacaoPendenciaEngenharia from "./ItemVisualizacaoPendenciaEngenharia";

const VisualizacaoPendenciaEngenharia = ({ dadosCard, engenharia }: any) => {
  const [itens, setItens] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    Promise.all([
      listarChecklistNegocio({
        id_loja: dadosCard.id_loja_coleta,
        id_negocio: dadosCard.id_coleta_cliente,
      }).then((res) =>
        setItens(
          res.filter(
            (item: any) =>
              item.observacao_item_checklist_engenharia &&
              item.tipoEngenharia_item_checklist_engenharia == engenharia,
          ),
        ),
      ),
    ]).finally(() => setIsLoaded(true));
  }, []);

  return (
    <div className="max-h-[90vh] overflow-auto">
      <div className="text-lg font-semibold">Pendência de Engenharia</div>
      <div>
        {isLoaded ? (
          <div className="flex flex-col gap-2 max-h-[65vh] overflow-auto">
            {itens.map((item, indexItem) => (
              <ItemVisualizacaoPendenciaEngenharia
                key={indexItem}
                item={item}
                indexItem={indexItem}
              />
            ))}
          </div>
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default VisualizacaoPendenciaEngenharia;