import LoaderSun from "@/components/common/Loader/LoaderSun";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { listarItensKitsPorTipo } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
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 { FormatFields, GetForm } from "@/utils";
import {
  filtrarPorMultiSelecao,
  filtrarPorMultiSelecaoEmArray,
  filtrarPorTexto,
} from "@/utils/filters";
import _ from "lodash";
import { Settings } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { FieldValues } from "react-hook-form";
import {
  MdEdit,
  MdInfo,
  MdOutlineToggleOff,
  MdOutlineToggleOn,
} from "react-icons/md";
import Swal from "sweetalert2";
import FormInversor from "./FormInversor";

const ConsultaInversor = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [distriuidorSelecionado, setDistribuidorSelecionado] =
    useState<string>("");
  const [distribuidoresSelecionadosInfo, setDistribuidoresSelecionadosInfo] =
    useState<Array<{ id: string; isNativo: boolean }>>([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [fabricantesTodos, setFabricantesTodos] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});
  const [inversores, setInversores] = useState([]);
  const formFiltro = GetForm();

  const tiposInversores = [
    { value: "micro_inversor", label: "Microinversor" },
    { value: "inversor_parede", label: "Inversor de Parede" },
  ];

  const tiposStrings = [
    { value: "microinversor", label: "Microinversor" },
    { value: "inversor_on_grid", label: "INVERSOR STRING ON-GRID" },
    { value: "inversor_off_grid", label: "INVERSOR STRING OFF-GRID" },
    { value: "inversor_hibrido", label: "INVERSOR STRING HÍBRIDO" },
  ];

  const tensoes = [
    "110",
    "115",
    "120",
    "127",
    "208",
    "220",
    "240",
    "254",
    "380",
    "440",
  ];

  const dados = [
    "id_item",
    "status_item",
    "codItem_item",
    "sku_item",
    "codDistribuidor_item",
    "nome_fabricante",
    "precoUnitario_item",
    "descricao_item",
    "tipoInversor_item",
    "tipoStringInversor_item",
    "tensoes_item",
    "strings_item",
    "mppts_item",
    "garantia_item",
    "potencia_item",
    "underload_item",
    "overload_item",
    "fases_item",
    "idStringCC_item",
    "idStringCA_item",
    "correnteEntrada_item",
    "correnteSaida_item",
    "qtdBateriasLitio_item",
    "idBateriaLitio_item",
    "qtdBateriasChumboAcido_item",
    "idBateriaChumbo_item",
    "tipoOrigem_item",
  ];

  const parseCurrency = (value: any) => {
    return Number(value.replace(/[R$\.\s]/g, "").replace(",", "."));
  };
  const columns = dados.map((e) => {
    let header = _.capitalize(e).replaceAll("_item", "").replaceAll("_", " ");
    header = header == "Coditem" ? "Código Interno" : header;
    header = header == "Codfabricante" ? "Cod Fabricante" : header;
    header = header == "Ultimaatualizacao" ? "Ultima Atualização" : header;
    header = header == "Precounitario" ? "Preço Unitário" : header;
    header = header == "Coddistribuidor" ? "Distribuidor/Fornecedor" : header;
    header = header == "Tipoinversor" ? "Tipo" : header;
    header = header == "Idstringcc" ? "Desc String CC" : header;
    header = header == "Idstringca" ? "Desc String CA" : header;
    header = header == "Correnteentrada" ? "Corrente Entrada" : header;
    header = header == "Correntesaida" ? "Corrente Saída" : header;
    header = header == "Qtdbateriaslitio" ? "Qtd Baterias Lítio" : header;
    header = header == "Idbaterialitio" ? "ID Bateria Lítio" : header;
    header =
      header == "Qtdbateriaschumboacido" ? "Qtd Baterias Chumbo Ácido" : header;
    header = header == "Idbateriachumbo" ? "ID Bateria Chumbo" : header;
    header = header == "Tipoorigem" ? "Origem" : header;

    return {
      header: header,
      accessorKey: e,
      filterFn: [
        "strings_item",
        "mppts_item",
        "potencia_item",
        "correnteEntrada_item",
        "correnteSaida_item",
        "qtdBateriasLitio_item",
        "qtdBateriasChumboAcido_item",
      ].includes(e)
        ? filtrarPorTexto
        : e == "tensoes_item"
          ? filtrarPorMultiSelecaoEmArray
          : filtrarPorMultiSelecao,
      cell: ({ getValue }: { getValue: any }) => {
        if (e === "precoUnitario_item") {
          return "R$" + FormatFields.formatarNumero(getValue());
        }
        return getValue();
      },
      sortingFn:
        e === "precoUnitario_item"
          ? (rowA: any, rowB: any, columnId: any) => {
              const a = parseCurrency(rowA.getValue(columnId) || "0");
              const b = parseCurrency(rowB.getValue(columnId) || "0");
              return a - b;
            }
          : undefined,
    };
  });
  const [stringboxes, setStringboxes] = useState<any>([]);
  const [baterias, setBaterias] = useState<any>([]);
  useEffect(() => {
    Promise.all([
      listarItensKitsPorTipo("13").then(setStringboxes),
      listarItensKitsPorTipo("16").then(setBaterias),
      listagemItens("inversores", { tipoOrigem_item: "*" }).then(setInversores),
      listarDistribuidores().then((res) =>
        setDistribuidores(
          res.filter(
            (distribuidor: any) => distribuidor.isFornecedor_distribuidor != "1"
          )
        )
      ),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
      listarFabricantes({ tipo_item: "8" }).then((res) => {
        setFabricantesTodos(res || []);
        setFabricantes(res || []);
      }),
    ]).then(() => setIsLoaded(true));
  }, []);

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

    const idsNativosSelecionados = new Set(
      distribuidoresSelecionadosInfo.filter((d) => d.isNativo).map((d) => d.id)
    );
    const idsCadastradosSelecionados = new Set(
      distribuidoresSelecionadosInfo.filter((d) => !d.isNativo).map((d) => d.id)
    );

    const itensFiltradosPorDistribuidor = (inversores || []).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 codigosFabricantesInversor = new Set(
      itensFiltradosPorDistribuidor
        .map((item: any) => String(item?.codFabricante_item || "").trim())
        .filter(Boolean)
    );
    const nomesFabricantesInversor = 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 (
        codigosFabricantesInversor.has(codigoInterno) ||
        codigosFabricantesInversor.has(codigoId) ||
        nomesFabricantesInversor.has(nome)
      );
    });

    setFabricantes(novosFabricantes);
  }, [
    distriuidorSelecionado,
    inversores,
    fabricantesTodos,
    distribuidoresSelecionadosInfo,
  ]);

  const onSubmitFunction = async (data: FieldValues) => {
    return cadastrarItens(data);
  };

  const sendEditarItens = async (data: any) => {
    return editarItens(data);
  };

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

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      e["idStringCC_item"] =
        stringboxes.find((s: any) => s.id_item === e["idStringCC_item"])
          ?.descricao_item || "";
      e["idStringCA_item"] =
        stringboxes.find((s: any) => s.id_item === e["idStringCA_item"])
          ?.descricao_item || "";
      // e["correnteEntrada_item"] = e["correnteEntrada_item"]
      //   ? e["correnteEntrada_item"] + "A"
      //   : "";
      // e["correnteSaida_item"] = e["correnteSaida_item"]
      //   ? e["correnteSaida_item"] + "A"
      //   : "";
      e["idBateriaLitio_item"] =
        baterias.find((b: any) => b.id_item === e["idBateriaLitio_item"])
          ?.descricao_item || "";
      e["idBateriaChumbo_item"] =
        baterias.find((b: any) => b.id_item === e["idBateriaChumbo_item"])
          ?.descricao_item || "";
      e["precoUnitario_item"] =
        "R$" + FormatFields.formatarNumero(e["precoUnitario_item"]);
      e["fases_item"] = e["fases_item"] == "1" ? "Monofásico" : "Trifásico";
      
      e["codDistribuidor_item"] =
        [
          ...(e["tipoOrigem_item"] == "1"
            ? distribuidoresNativos
            : distribuidores),
        ].find(
          (distribuidor) =>
            distribuidor.id_distribuidor == e["codDistribuidor_item"]
        )?.nome_distribuidor || "";
      e["tipoInversor_item"] =
        tiposInversores.find((tipo) => tipo.value == e["tipoInversor_item"])
          ?.label || "";
      e["tipoStringInversor_item"] =
        tiposStrings.find((tipo) => tipo.value == e["tipoStringInversor_item"])
          ?.label || "";
      e["tensoes_item"] =
        e["tensoes_item"]
          ?.split(",")
          ?.map((t: string) => `${t}V`)
          ?.join(", ") || "";
      e["garantia_item"] = e["garantia_item"]
        ? e["garantia_item"] + " meses"
        : "";
      e["underload_item"] = e["potenciaNominalMinima_item"] + "kW";
      e["overload_item"] = e["potenciaNominalMaxima_item"] + "kW";
      e["tipoOrigem_item"] =
        e["tipoOrigem_item"] == "1" ? "Nativo" : "Cadastrado";
      return e;
    });
  };
  const getOptionsTensoes = useMemo(() => {
    const unicos = [
      ...new Set(
        inversores
          ?.filter((a: any) => a.tensoes_item !== null)
          ?.flatMap((i: any) => i.tensoes_item.split(","))
          .map((v: string) => v.trim())
      ),
    ];

    return unicos;
  }, [inversores]);

  const valoresTipoInversorSelecionados =
    filtro?.tipoInversor_item?.map((item: any) => item?.value) || [];
  const filtroTipoInversorTemTodos =
    valoresTipoInversorSelecionados.includes("*");
  const filtroSomenteMicroInversor =
    valoresTipoInversorSelecionados.includes("micro_inversor") &&
    !valoresTipoInversorSelecionados.includes("inversor_parede") &&
    !filtroTipoInversorTemTodos;
  const filtroSomenteInversorParede =
    valoresTipoInversorSelecionados.includes("inversor_parede") &&
    !valoresTipoInversorSelecionados.includes("micro_inversor") &&
    !filtroTipoInversorTemTodos;
  const opcoesTiposString = [
    { value: "*", label: "Todos" },
    ...tiposStrings.filter((tipo) => {
      if (filtroSomenteMicroInversor) return tipo.value === "microinversor";
      if (filtroSomenteInversorParede) return tipo.value !== "microinversor";
      return true;
    }),
  ];

  return (
    <>
      {isLoaded ? (
        <div>
          <InputGroup className="grid grid-cols-5 px-9">
            {/* <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(",");

                const distribuidoresInfo = (e || [])
                  .filter((d: any) => d?.value != "*")
                  .map((d: any) => {
                    const [origem, id] = String(d?.value || "").split("-");
                    return {
                      id: String(id || "").trim(),
                      isNativo: String(origem) === "1",
                    };
                  })
                  .filter((d: any) => d.id);

                setDistribuidorSelecionado(idsDistribuidores);
                setDistribuidoresSelecionadosInfo(distribuidoresInfo);
                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 Inversores que tenha Inversores cadastrados para os Distribuidores selecionados."
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...fabricantes
                  .filter(
                    (e: any) =>
                      (e.tipos_itens_fabricante?.split(",").includes("8") ||
                        e.tipos_itens_fabricante?.split(",").includes("*") ||
                        e.tipos_itens_fabricante == "8") &&
                      e.status_fabricante == "1"
                  )
                  .map((fabricante) => ({
                    ...fabricante,
                    codDistribuidor_fabricante:
                      fabricante.codDistribuidor_fabricante ||
                      distriuidorSelecionado,
                    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="fases_item"
              label="Fases"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Monofásico" },
                { value: "3", label: "Trifásico" },
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, fases_item: e }));
              }}
            />
            <InputSelectComponent
              name="tipoInversor_item"
              label="Tipos de Inversor"
              formulario={formFiltro}
              isMulti
              options={[{ value: "*", label: "Todos" }, ...tiposInversores]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                const valores = (e || []).map((item: any) => item?.value);
                const temTodos = valores.includes("*");
                const somenteMicro =
                  valores.includes("micro_inversor") &&
                  !valores.includes("inversor_parede") &&
                  !temTodos;
                const somenteParede =
                  valores.includes("inversor_parede") &&
                  !valores.includes("micro_inversor") &&
                  !temTodos;

                setFiltro((prev: any) => {
                  const tipoStringAtual = prev?.tipoStringInversor_item || [];
                  let tipoStringSincronizado = tipoStringAtual;

                  if (somenteMicro) {
                    // Keep only compatible string types when filtering only microinverters.
                    tipoStringSincronizado = (tipoStringAtual || []).filter(
                      (tipo: any) => tipo?.value === "microinversor"
                    );
                  } else if (somenteParede) {
                    tipoStringSincronizado = (tipoStringAtual || []).filter(
                      (tipo: any) =>
                        tipo?.value !== "microinversor" && tipo?.value !== "*"
                    );
                  } else {
                    // When multiple inverter types are selected, clear residual string filters.
                    tipoStringSincronizado = [];
                  }

                  return {
                    ...prev,
                    tipoInversor_item: e,
                    tipoStringInversor_item: tipoStringSincronizado,
                  };
                });
              }}
            />
            <InputSelectComponent
              name="tipoStringInversor_item"
              label="Tipos de String"
              formulario={formFiltro}
              isMulti
              options={opcoesTiposString}
              width="flex-1 min-w-[243px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  tipoStringInversor_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 }));
              }}
            />
            <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 }));
              }}
            />
          </InputGroup>
          <Accordion type="single" className="mb-8" collapsible>
            <AccordionItem value="filtros">
              <AccordionTrigger className="text-sm pl-4 justify-center hover:text-black">
                <span className="flex items-center gap-2">
                  <Settings size={17} /> Filtros Avançados
                </span>
              </AccordionTrigger>
              <AccordionContent>
                <InputGroup className="grid grid-cols-5">
                  <InputSelectComponent
                    name="tensoes_item"
                    label="Tensões"
                    formulario={formFiltro}
                    isMulti
                    options={[
                      { value: "*", label: "Todos" },
                      ...getOptionsTensoes.map((t) => ({ value: t, label: t })),
                    ]}
                    width="flex-1 min-w-[200px]"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({ ...prev, tensoes_item: e }));
                    }}
                  />
                  <Input
                    name="strings_item"
                    label="Qtd Strings"
                    formulario={formFiltro}
                    width="flex-1 min-w-[200px]"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        strings_item: e.target.value,
                      }));
                    }}
                  />

                  <Input
                    name="mppts_item"
                    label="MPPTs"
                    formulario={formFiltro}
                    width="flex-1 min-w-[200px]"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        mppts_item: e.target.value,
                      }));
                    }}
                  />
                  <Input
                    name="potencia_item"
                    label="Potência (kW)"
                    formulario={formFiltro}
                    mascara="numero"
                    width="flex-1 min-w-[200px]"
                    onChange={(e: any) => {
                      if (e.target.value == "0,00") {
                        e.target.value = "";
                      }
                      setFiltro((prev: any) => ({
                        ...prev,
                        potencia_item: e.target.value
                          ? e.target.value.replace(",", ".")
                          : e.target.value,
                      }));
                    }}
                  />

                  <Input
                    label="Corrente Máxima de Entrada CC"
                    name="correnteEntrada_item"
                    formulario={formFiltro}
                    prefix="A"
                    mascara="numerico"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        correnteEntrada_item: e.target.value,
                      }));
                    }}
                  />
                  <Input
                    label="Corrente Máxima de Saída CA"
                    name="correnteSaida_item"
                    formulario={formFiltro}
                    mascara="numerico"
                    prefix="A"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        correnteSaida_item: e.target.value,
                      }));
                    }}
                  />

                  <InputSelectComponent
                    label="ID String CC"
                    name="idStringCC_item"
                    formulario={formFiltro}
                    isMulti
                    options={stringboxes.map((box: any) => ({
                      value: box.id_item,
                      label: box.descricao_item,
                    }))}
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        idStringCC_item: e,
                      }));
                    }}
                  />

                  <InputSelectComponent
                    label="ID String CA"
                    name="idStringCA_item"
                    isMulti
                    formulario={formFiltro}
                    options={stringboxes.map((box: any) => ({
                      value: box.id_item,
                      label: box.descricao_item,
                    }))}
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        idStringCA_item: e,
                      }));
                    }}
                  />
                  <Input
                    label="Qtd Baterias Lítio"
                    formulario={formFiltro}
                    mascara="numerico"
                    name="qtdBateriasLitio_item"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        qtdBateriasLitio_item: e.target.value,
                      }));
                    }}
                  />
                  <InputSelectComponent
                    label="ID Bateria Lítio"
                    name="idBateriaLitio_item"
                    isMulti
                    formulario={formFiltro}
                    options={baterias
                      ?.filter((b: any) => b.tipoBateria_item === "0")
                      .map((box: any) => ({
                        value: box.id_item,
                        label: box.descricao_item,
                      }))}
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        idBateriaLitio_item: e,
                      }));
                    }}
                  />

                  <Input
                    label="Qtd Baterias Chumbo Ácido"
                    formulario={formFiltro}
                    mascara="numerico"
                    name="qtdBateriasChumboAcido_item"
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        qtdBateriasChumboAcido_item: e.target.value,
                      }));
                    }}
                  />
                  <InputSelectComponent
                    label="ID Bateria Chumbo"
                    name="idBateriaChumbo_item"
                    isMulti
                    formulario={formFiltro}
                    options={baterias
                      ?.filter((b: any) => b.tipoBateria_item === "1")
                      .map((box: any) => ({
                        value: box.id_item,
                        label: box.descricao_item,
                      }))}
                    onChange={(e: any) => {
                      setFiltro((prev: any) => ({
                        ...prev,
                        idBateriaChumbo_item: e,
                      }));
                    }}
                  />
                </InputGroup>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
          <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"] = "inversor";
                      data["parametro_coluna"] = "inversores";
                      data["parametro_anexo"] = "imagem_item";
                      data["subpasta_aws"] = "Inversor/AnexoInversor";
                      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={(props) => (
              <FormInversor
                {...props}
                distribuidores={distribuidores}
                fabricantes={fabricantes}
                stringboxes={stringboxes}
                tiposInversores={tiposInversores}
                baterias={baterias}
                tiposStrings={tiposStrings}
                tensoes={tensoes}
              />
            )}
            manualFilters
            pageName="Inversor"
            filters={filtro}
          />
        </div>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default ConsultaInversor;