import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { cadastrarItens } from "@/requests/CRUD/KitManual/cadastroKitManual";
import { editarItens } from "@/requests/CRUD/KitManual/editarKitManual";
import { listagemItens } from "@/requests/CRUD/KitManual/listarKitManual";
import { useAuth } from "@/src/contexts/authContext";
import { filtrarPorMultiSelecao, FormatFields, GetForm } from "@/utils";
import _ from "lodash";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import {
  MdEdit,
  MdInfo,
  MdOutlineToggleOff,
  MdOutlineToggleOn,
} from "react-icons/md";
import Swal from "sweetalert2";
import FormOutros from "./FormOutros";

const ConsultaOutros = () => {
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [fabricantesTodos, setFabricantesTodos] = useState<any[]>([]);
  const [distribuidorSelecionadoCsv, setDistribuidorSelecionadoCsv] =
    useState<string>("");
  const [filtro, setFiltro] = useState<any>({});
  const [isLoaded, setIsLoaded] = useState(false);
  const formFiltro = GetForm();

  useEffect(() => {
    Promise.all([
      listarFabricantes({ tipo_item: "11" }).then((res) => {
        setFabricantesTodos(res || []);
        setFabricantes(res || []);
      }),
      listarDistribuidores().then((res) =>
        setDistribuidores(
          res.filter(
            (distribuidor: any) => distribuidor.isFornecedor_distribuidor == "0"
          )
        )
      ),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
    ]).then(() => setIsLoaded(true));
  }, []);

  useEffect(() => {
    if (distribuidorSelecionadoCsv === "") {
      setFabricantes(fabricantesTodos);
      return;
    }

    const distribuidoresSelecionados = (
      filtro?.codDistribuidor_item || []
    ).filter((d: any) => d?.value != "*");
    const idsNativosSelecionados = new Set(
      distribuidoresSelecionados
        .filter((d: any) => d?.isNativo == "1")
        .map((d: any) => String(d?.value || "").split("-")[1] || "")
        .filter(Boolean)
    );
    const idsCadastradosSelecionados = new Set(
      distribuidoresSelecionados
        .filter((d: any) => d?.isNativo != "1")
        .map((d: any) => String(d?.value || "").split("-")[1] || "")
        .filter(Boolean)
    );

    listagemItens("outros_componentes", { tipoOrigem_item: "*" }).then(
      (res) => {
        const itensFiltradosPorDistribuidor = (res || []).filter(
          (item: any) => {
            const idDistribuidorItem = String(
              item?.codDistribuidor_item || ""
            ).trim();
            if (!idDistribuidorItem) return false;

            const origemItem = String(item?.tipoOrigem_item || "").trim();
            if (origemItem === "1") {
              return idsNativosSelecionados.has(idDistribuidorItem);
            }
            if (origemItem === "0") {
              return idsCadastradosSelecionados.has(idDistribuidorItem);
            }

            return (
              idsNativosSelecionados.has(idDistribuidorItem) ||
              idsCadastradosSelecionados.has(idDistribuidorItem)
            );
          }
        );

        const codigosFabricantes = new Set(
          itensFiltradosPorDistribuidor
            .map((item: any) => String(item?.codFabricante_item || "").trim())
            .filter(Boolean)
        );
        const nomesFabricantes = new Set(
          itensFiltradosPorDistribuidor
            .map((item: any) =>
              String(item?.nome_fabricante || "")
                .trim()
                .toLowerCase()
            )
            .filter(Boolean)
        );

        const novosFabricantes = fabricantesTodos.filter((fabricante: any) => {
          const codigoInterno = String(
            fabricante?.codInterno_fabricante || ""
          ).trim();
          const codigoId = String(fabricante?.id_fabricante || "").trim();
          const nome = String(fabricante?.nome_fabricante || "")
            .trim()
            .toLowerCase();
          return (
            codigosFabricantes.has(codigoInterno) ||
            codigosFabricantes.has(codigoId) ||
            nomesFabricantes.has(nome)
          );
        });

        setFabricantes(novosFabricantes);
      }
    );
  }, [
    distribuidorSelecionadoCsv,
    fabricantesTodos,
    filtro?.codDistribuidor_item,
  ]);
  const dados = [
    "id_item",
    "status_item",
    "codItem_item",
    "sku_item",
    "nome_fabricante",
    "descricao_item",
    "codDistribuidor_item",
    "codFabricante_item",
    "garantia_item",
    "qtdKit_item",
    "tipo_item",
    "potencia_item",
    "precoUnitario_item",
    "tipoOrigem_item",
  ];
  const columns = dados.map((e) => {
    let header = _.capitalize(e).replaceAll("_item", "").replaceAll("_", " ");
    header = header == "Coditem" ? "Código Interno" : header;
    header = header == "Ultimaatualizacao" ? "Ultima Atualização" : header;
    header = header == "Codfabricante" ? "Cod Fabricante" : header;

    header = header == "Qtdkit" ? "Qtd Kit" : header;
    header = header == "Precounitario" ? "Preço Unitário" : header;
    header = header == "Coddistribuidor" ? "Distribuidor/Fornecedor" : header;

    header = header == "Tipoorigem" ? "Origem" : header;
    return { header: header, accessorKey: e, filterFn: filtrarPorMultiSelecao };
  });

  const onSubmitFunction = async (data: FieldValues) => {
    // const formData = new FormData();
    // Object.keys(data).forEach((key) => {
    //   formData.append(key, data[key]);
    // });
    return cadastrarItens(data);
  };

  const sendEditarItens = async (data: any) => {
    // const formData = new FormData();
    // Object.keys(data).forEach((key) => {
    //   formData.append(key, data[key]);
    // });
    return editarItens(data);
  };

  const listagemItensTotal = async () => {
    return listagemItens("outros_componentes", { tipoOrigem_item: "*" });
  };

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      e["precoUnitario_item"] =
        "R$" + FormatFields.formatarNumero(e["precoUnitario_item"]);
      e["codDistribuidor_item"] =
        [
          ...(e["tipoOrigem_item"] == "1"
            ? distribuidoresNativos
            : distribuidores),
        ].find(
          (distribuidor) =>
            distribuidor.id_distribuidor == e["codDistribuidor_item"]
        )?.nome_distribuidor || "";
      e["tipoOrigem_item"] =
        e["tipoOrigem_item"] == "1" ? "Nativo" : "Cadastrado";
      return e;
    });
  };

  return (
    <>
      {isLoaded ? (
        <>
          <div className="flex flex-row gap-2 flex-wrap pb-3">
            <InputSelectComponent
              name="codDistribuidor_item"
              label="Distribuidores/Fornecedores"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...[
                  ...distribuidoresNativos.map((d) => ({
                    ...d,
                    isNativo: "1",
                  })),
                  ...distribuidores,
                ].map((distribuidor) => ({
                  ...distribuidor,
                  value: `${distribuidor.isNativo == "1" ? "1" : "0"}-${distribuidor.id_distribuidor}`,
                  label: distribuidor.nome_distribuidor,
                })),
              ]}
              formatOptionLabel={(distribuidor) => (
                <div>{`${distribuidor.label} ${distribuidor.value == "*" ? "" : `(${distribuidor.isNativo == "1" ? "Nativo" : "Cadastrado"})`}`}</div>
              )}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                const idsDistribuidores = (e || [])
                  .filter((d: any) => d?.value != "*")
                  .map((d: any) => String(d?.value || "").split("-")[1] || "")
                  .filter(Boolean)
                  .join(",");

                setDistribuidorSelecionadoCsv(idsDistribuidores);
                setFiltro((prev: any) => ({
                  ...prev,
                  codDistribuidor_item: e,
                  tipoOrigem_item: [
                    ...(e?.some(
                      (d: any) => d?.value == "*" || d?.isNativo == "1"
                    )
                      ? [
                          {
                            label: "Nativo",
                            value: "1",
                          },
                        ]
                      : []),
                    ...(e?.some(
                      (d: any) => d?.value == "*" || d?.isNativo != "1"
                    )
                      ? [
                          {
                            label: "Cadastrado",
                            value: "0",
                          },
                        ]
                      : []),
                  ],
                }));
              }}
            />
            <InputSelectComponent
              name="codFabricante_item"
              label="Fabricantes"
              infoMessage="Atenção! Nesta lista mostra apenas os Fabricante de Outros Componentes que tenha Itens cadastrados para os Distribuidores selecionados."
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...fabricantes.map((fabricante) => ({
                  ...fabricante,
                  codDistribuidor_fabricante:
                    fabricante.codDistribuidor_fabricante ||
                    distribuidorSelecionadoCsv,
                  value: fabricante.id_fabricante,
                  label: fabricante.nome_fabricante,
                })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, nome_fabricante: e }));
              }}
            />
            <InputSelectComponent
              name="status_item"
              label="Status"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Ativo" },
                { value: "0", label: "Inativo" },
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, status_item: e }));
              }}
            />
            <InputSelectComponent
              name="tipoOrigem_item_filtro"
              label="Origem"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Nativo" },
                { value: "0", label: "Cadastrado" },
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, tipoOrigem_item: e }));
              }}
            />
          </div>
          <ReactTable
            columns={columns}
            listFunction={listagemItensTotal}
            idCol="id_item"
            isActiveCol="status_item"
            // canEdit
            formatFunction={formatFunction}
            // canDesactive
            actionButtons={(
              data: any,
              updateTable: any,
              setIsLoading: any,
              {
                idCol,
                isActive,
                isActiveCol,
                pageName,
                editFunction,
                rowOriginal,
                openEdit,
              }: any
            ) => [
              {
                title: "Editar",
                className: `navButton buttonWarning`,
                onClick: (e: any) => {
                  return openEdit(rowOriginal);
                },
                content:
                  rowOriginal?.tipoOrigem_item == "0" ? <MdEdit /> : undefined,
              },
              {
                className: `navButton ${isActive ? "buttonSuccess" : "buttonDanger"}`,

                onClick: (e: any) => {
                  handleSweetAlert(
                    {
                      icon: "warning",
                      title: `${!isActive ? "Ativar" : "Desativar"} ${pageName}`,
                      html: `Tem certeza que deseja <b>${!isActive ? "Ativar" : "Desativar"}</b> o registro ${data[idCol]}?`,
                    },
                    async () => {
                      data["precoUnitario_item"] =
                        FormatFields.desformatarNumeros(
                          data["precoUnitario_item"]
                        );

                      data["parametro"] = "outros_componentes";
                      data["parametro_coluna"] = "outros_componentes";
                      data["parametro_anexo"] = "imagem_item";
                      data["subpasta_aws"] =
                        "OutrosComponentes/AnexoOutrosComponentes";
                      data["mudar_status"] = 1;
                      data["id_cliente"] = session.id_empresa_usuario;
                      data[isActiveCol] = !isActive ? "1" : "0";

                      return editFunction(data).then(() => updateTable());
                    }
                  );
                },
                content:
                  rowOriginal?.tipoOrigem_item == "0" ? (
                    isActive ? (
                      <MdOutlineToggleOn />
                    ) : (
                      <MdOutlineToggleOff />
                    )
                  ) : undefined,
              },
              {
                title: "Nativo",
                className: `navButton buttonWarning`,
                onClick: (e: any) => {
                  Swal.fire({
                    icon: "info",
                    title: `Item de Origem Nativa`,
                    html: `Este item é de origem nativa, ou seja, é compartilhado entre as empresas e não pode ser editado ou desativado. Para sugerir alterações, entre em contato com o suporte.`,
                  });
                },
                content:
                  rowOriginal?.tipoOrigem_item == "1" ? <MdInfo /> : undefined,
              },
            ]}
            createFunction={onSubmitFunction}
            editFunction={sendEditarItens}
            Form={FormOutros}
            pageName="Outros Componentes"
            filters={filtro}
            manualFilters
          />
        </>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default ConsultaOutros;