import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { obterPendenciaCompraMaterial } from "@/requests/CRUD/PendenciaCompraMaterial/obterPendenciaCompraMaterial";
import { useEffect, useMemo, useState } from "react";
import ItemVisualizacaoCompraMaterial from "./ItemVisualizacaoCompraMaterial";
import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import CamposPersonalizados from "../../campos_personalizados";
import { GetForm } from "@/utils";
import OrcamentoTabela from "./orcamentoCompra";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { listarCustosExtras } from "@/requests/CRUD/Politica/listarCustosExtras";
import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import ListaComponentesComprados from "./DadosComprados";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";

const VisualizacaoCompraMaterial = ({ dadosCard }: any) => {
  const [fornecedores, setFornecedores] = useState<any[]>([]);
  const [itensCompra, setItensCompra] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [dadosKit, setDadosKit] = useState<any[]>([]);
  const [precificacao, setPrecificacao] = useState<any[]>([]);
  const [custosExtras, setCustosExtras] = useState<any[]>([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [
    openModalVisualizaItensComprados,
    setOpenModalVisualizaItensComprados,
  ] = useState(false);
  const [camposPersonalizados, setCamposPersonalizados] = useState([]);
  const { handleSubmit, ...form } = GetForm();
  const propostaAprovada = useMemo(() => {
    return dadosCard?.propostas.find((p: any) => p.status_proposta === "1");
  }, [dadosCard?.propostas]);
  useEffect(() => {
    Promise.all([
      listarFabricantes().then((res) =>
        setFornecedores([
          { nome_fabricante: "Fornecedor não informado", id_fabricante: "0" },
          ...res,
        ])
      ),
      listarDistribuidores().then(setDistribuidores),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
      listarCustosExtras({
        tipo_negocio: dadosCard.tipoNegocio_coleta,
        id_loja: dadosCard.id_loja_coleta,
      }).then(setCustosExtras),
      listarComponentesKitByKitId(propostaAprovada.kit_proposta).then(
        setDadosKit
      ),
      baixarAwsContent(
        propostaAprovada.caminho_resultadoPrecificacao_proposta
      ).then(setPrecificacao),
      listarCamposPersonalizados().then((res) => {
        setCamposPersonalizados(
          res.filter(
            (item: any, index: any, self: any) =>
              item.status_campo_personalizado == "1" &&
              item.dados_gravacao_personalizado
            // index ===
            //   self.findIndex(
            //     (t: any) =>
            //       t.id_campo_personalizado === item.id_campo_personalizado
            //   )
          )
        );
      }),
      dadosCard.pendencia_compra_material?.length > 0
        ? obterPendenciaCompraMaterial(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">Compra de Materiais</div>
      <div>
        {isLoaded ? (
          <div className="flex flex-col gap-2 max-h-[65vh] overflow-auto">
            {camposPersonalizados?.filter(
              (a: any) =>
                a.cadaTopico_campo_personalizado === "2" &&
                a.local_campo_personalizado === "5"
            ).length > 0 && (
                <div
                  className={`border block p-2 mb-2 pt-5 relative rounded-md border-stroke`}
                >
                  <span className="px-1 absolute -top-3 bg-white">
                    Campos Personalizados
                  </span>
                  <CamposPersonalizados
                    formulario={form}
                    blockEditCard
                    manualCampos={camposPersonalizados?.filter(
                      (a: any) =>
                        a.cadaTopico_campo_personalizado === "2" &&
                        a.local_campo_personalizado === "5"
                    )}
                    eachTopic={"2"}
                    localCampo="5"
                    tipoNegocio={dadosCard?.tipoNegocio_coleta}
                    idLoja={dadosCard?.id_loja_coleta}
                    dataCard={dadosCard}
                  // onSubmitFunction={salvarCamposPersonalizados}
                  />
                </div>
              )}
            {itensCompra.map((itemCompra, indexItem) => (
              <ItemVisualizacaoCompraMaterial
                key={indexItem}
                form={form}
                camposPersonalizados={camposPersonalizados}
                fornecedores={fornecedores}
                dadosCard={dadosCard}
                itemCompra={itemCompra}
                indexItem={indexItem}
              />
            ))}
          </div>
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default VisualizacaoCompraMaterial;