import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { obterFaturamento } from "@/requests/CRUD/PendenciaFaturamento/obterFaturamento";
import { useEffect, useState } from "react";
import ItemVisualizacaoFaturamento from "./ItemVisualizacaoFaturamento";

const VisualizacaoFaturamento = ({ dadosCard }: any) => {
  const [fornecedores, setFornecedores] = useState<any[]>([]);
  const [itensCompra, setItensCompra] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    Promise.all([
      listarFabricantes().then((res) =>
        setFornecedores([
          { nome_fabricante: "Fornecedor não informado", id_fabricante: "0" },
          ...res,
        ])
      ),
      dadosCard.pendencia_faturamento_coleta?.length > 0
        ? obterFaturamento(dadosCard.id_coleta_cliente).then((res) =>
            setItensCompra(res)
          )
        : setItensCompra([]),
    ]).finally(() => setIsLoaded(true));
  }, []);

  return (
    <div className="max-h-[90vh] overflow-auto">
      <div className="text-lg font-semibold">Faturamento</div>
      <div>
        {isLoaded ? (
          <div className="flex flex-col gap-2 max-h-[65vh] overflow-auto">
            {itensCompra.map((itemCompra, indexItem) => (
              <ItemVisualizacaoFaturamento
                key={indexItem}
                fornecedores={fornecedores}
                itemCompra={itemCompra}
                indexItem={indexItem}
                dadosCard={dadosCard}
              />
            ))}
          </div>
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default VisualizacaoFaturamento;