import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ImgAwsGallery from "@/components/ImgAwsGallery/ImgAwsGallery";
import ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarProductsFromCategory } from "@/requests/CRUD/ColetaDados/listarProductsFromCategory";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { FormatFields, GetForm, GetGallery } from "@/utils";
import { Slider } from "@mui/material";
import { Plus, Search } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";

const NewItemComponenteAmpliacao = ({
  submitAddItemKit,
  distribuidor,
  itemCompostos,
  defaultFilters,
}: any) => {
  const [productCategories, setProductCategories] = useState<any[]>([]);
  const [showResults, setShowResults] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState("8");
  const [tableKey, setTableKey] = useState(0);
  const [productInfo, setProductInfo] = useState<any>({});
  const [isAddingProduct, setIsAddingProduct] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [products, setProducts] = useState<any[]>([]);
  const [imagens, setImagens] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [potenciasDisponiveis, setPotenciasDisponiveis] = useState<number[]>([
    0, 0,
  ]);
  const [potenciasFiltro, setPotenciasFiltro] = useState<number[]>([0, 0]);
  const [productsFiltrados, setProductsFiltrados] = useState<any[]>([]);
  const { openGallery, setGallery } = GetGallery();
  const { handleSubmit, ...formItem } = GetForm();
  const formFiltro = GetForm();
  function handleFiltrar() {
    if (!filtro.codDistribuidor_item)
      return toast.error("Selecione um distribuidor");
    listarTiposItensKit().then((res) => {
      setProductCategories(res);
      listarProductsFromCategory({
        id: "8",
        distribuidor: filtro.codDistribuidor_item,
        tipoOrigem_item: filtro.tipoOrigem_item,
      }).then((res) => {
        setProducts([...res]);

        setPotenciasDisponiveis(
          res.length > 0
            ? res.reduce(
                (acc: number[], curr: any) => {
                  const valorMin =
                    +curr.potencia_item < acc[0] ? +curr.potencia_item : acc[0];
                  const valorMax =
                    +curr.potencia_item > acc[1] ? +curr.potencia_item : acc[1];

                  return [valorMin, valorMax];
                },
                [Infinity, 0],
              )
            : [0, 0],
        );
      });
    });
    setShowResults(true);
  }
  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[],
  ) {
    if (!row.original[columnId]) {
      return true;
    }

    if (
      filterValue?.length == 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected.value == "*" ||
          optionSelected.label == row.original[columnId],
      )
    ) {
      return true;
    }

    return false;
  }

  useEffect(() => {
    setPotenciasFiltro(potenciasDisponiveis);
  }, [potenciasDisponiveis]);

  useEffect(() => {
    setProductsFiltrados(
      selectedCategory == "8"
        ? products.filter(
            (product) =>
              +product.potencia_item >= potenciasFiltro[0] &&
              +product.potencia_item <= potenciasFiltro[1],
          )
        : products,
    );
  }, [potenciasFiltro, products]);

  useEffect(() => {
    setGallery(
      imagens.map((imagem) => ({
        src: imagem.src,
        name: imagem?.imagem_item?.split("/").pop(),
      })),
    );
  }, [imagens]);

  useEffect(() => {
    Promise.all([
      listarDistribuidores().then((res) => setDistribuidores(res)),
      listarFabricantes().then((res) =>
        setFabricantes(
          res.filter((fabricante: any) =>
            fabricante.tipos_itens_fabricante?.split(",")?.includes("8"),
          ),
        ),
      ),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
    ]).finally(() => setIsLoaded(true));
  }, []);

  const [columns, setColumns] = useState([
    { header: "Nome", accessorKey: "descricao_item" },
    { header: "Imagem", accessorKey: "imagem" },
    {
      header: "Potência",
      accessorKey: "potencia_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Tipo de Ligação",
      accessorKey: "fases_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Distribuidor",
      accessorKey: "codDistribuidor_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Fabricante",
      accessorKey: "codFabricante_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Tipo de Inversor",
      accessorKey: "tipoInversor_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Tipo de String",
      accessorKey: "tipoStringInversor_item",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Tensão",
      accessorKey: "tensoes_item",
      filterFn: filtrarPorMultiSelecao,
    },
  ]);

  const [filtro, setFiltro] = useState<any>({});

  function handleChangePotenciaFiltro(
    event: Event,
    newValue: number | number[],
  ) {
    const newValues = newValue as number[];
    setPotenciasFiltro(newValues);
  }

  const fases = [
    { value: "1", label: "Monofásico" },
    { value: "2", label: "Bifásico" },
    { value: "3", label: "Trifásico" },
  ];

  const tiposStringsInversores = [
    { 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 formatProducts = async (data: any) => {
    setImagens((prev) => {
      return [...data].map((e: any, index: number) => ({
        ...e,
        src: "",
      }));
    });

    const newData = [...data].map((e: any, index: number) => {
      e.fases_item = fases.find((fase) => fase.value == e.fases_item)?.label;
      e.tipoInversor_item =
        e.tipoInversor_item == "micro_inversor"
          ? "Microinversor"
          : "Inversor de Parede";

      e.tipoStringInversor_item = tiposStringsInversores.find(
        (tipo) => tipo.value == e.tipoStringInversor_item,
      )?.label;

      e.potencia_item = FormatFields.formatarNumero(e.potencia_item) + "kW";

      e.nome_tipo_item = productCategories.find(
        (category) => category.id_tipo_item == selectedCategory,
      )?.nome_tipo_item;

      e.codFabricante_item =
        e.codFabricante_item == 0
          ? "Sem Fabricante"
          : fabricantes?.find(
              (fabricante) => fabricante.id_fabricante == e.codFabricante_item,
            )?.nome_fabricante;
      if (e.imagem_item && e.imagem_item !== null) {
        e.imagem = (
          <ImgAwsGallery
            key={index}
            caminho={e.imagem_item}
            indexImagem={index}
            setImagens={setImagens}
            onClick={() => openGallery(index, false)}
          />
        );
      }

      return e;
    });
    return [...newData];
  };

  function submitEdicaoItem(data: any) {
    setIsLoading(true);

    return submitAddItemKit({
      ...productInfo,
      qtd_item: +data.quantity,
    }).finally(() => setIsLoading(false));
  }

  return (
    <div>
      <div className="flex flex-col gap-3" onClick={(e) => e.stopPropagation()}>
        <div className=" ">
          <div className="flex flex-row gap-2 flex-wrap pb-3">
            <InputSelectComponent
              name="codDistribuidor_item"
              label="Distribuidor"
              formulario={formFiltro}
              options={[
                ...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) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  codDistribuidor_item: e.id_distribuidor,
                  tipoOrigem_item: e?.isNativo == "1" ? "1" : "0",
                }));
              }}
              defaultValue={
                defaultFilters && defaultFilters.codDistribuidor_item
              }
            />
            <InputSelectComponent
              name="codFabricante_item"
              label="Fabricantes"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...fabricantes.map((cargo) => ({
                  value: cargo.id_fabricante,
                  label: cargo.nome_fabricante,
                })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, codFabricante_item: e }));
              }}
              defaultValue={defaultFilters && defaultFilters.codFabricante_item}
            />
            <InputSelectComponent
              name="fases_item"
              label="Fases"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...fases.filter((fase) => fase.value != "2"),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, fases_item: e }));
              }}
              defaultValue={defaultFilters && defaultFilters.fases_item}
            />
            <InputSelectComponent
              name="tipoInversor_item"
              label="Tipo de Inversor"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "inversor_parede", label: "Inversor de Parede" },
                { value: "micro_inversor", label: "Microinversor" },
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, tipoInversor_item: e }));
              }}
              defaultValue={defaultFilters && defaultFilters.tipoInversor_item}
            />
            <InputSelectComponent
              name="tipoStringInversor_item"
              label="Tipo de String"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...tiposStringsInversores,
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  tipoStringInversor_item: e,
                }));
              }}
              defaultValue={
                defaultFilters && defaultFilters.tipoStringInversor_item
              }
            />
            <InputSelectComponent
              name="tensoes_item"
              label="Tensões (V)"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todas" },
                { label: "110", value: "110" },
                { label: "115", value: "115" },
                { label: "120", value: "120" },
                { label: "127", value: "127" },
                { label: "208", value: "208" },
                { label: "220", value: "220" },
                { label: "240", value: "240" },
                { label: "254", value: "254" },
                { label: "380", value: "380" },
                { label: "440", value: "440" },
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({ ...prev, tensoes_item: e }));
              }}
              defaultValue={defaultFilters && defaultFilters.tensoes_item}
            />
            <div className="flex flex-col gap-1">
              <div>Potência</div>
              <span className="text-sm text-center">
                {potenciasFiltro[0].toLocaleString("pt-BR", {
                  style: "currency",
                  currency: "BRL",
                })}{" "}
                -{" "}
                {potenciasFiltro[1].toLocaleString("pt-BR", {
                  style: "currency",
                  currency: "BRL",
                })}
              </span>
              <Slider
                className=" !py-0 !pt-4"
                onChange={handleChangePotenciaFiltro}
                // defaultValue={valor}
                value={potenciasFiltro}
                max={potenciasDisponiveis[1]}
                min={potenciasDisponiveis[0]}
                step={1}
              />
            </div>
          </div>
          <div className="flex justify-center">
            <Button
              type="button"
              className="bg-success gap-2 text-white py-2 px-9 rounded-sm"
              onClick={handleFiltrar}
            >
              <Search size={18} /> Filtrar
            </Button>
          </div>
        </div>

        {isLoaded ? (
          showResults &&
          tableKey >= 0 && (
            <ReactTable
              key={tableKey}
              columns={columns}
              formatFunction={formatProducts}
              listFunction={async () =>
                new Promise((resolve, reject) => resolve([]))
              }
              data={productsFiltrados}
              idCol="id_item"
              pageName="Produto"
              tableDivClassName="overflow-auto"
              actionButtons={(
                data: any,
                updateTable: any,
                setIsLoading: any,
                { idCol, pageName, editFunction, rowOriginal }: any,
              ) => [
                {
                  className: `navButton text-black dark:text-white`,
                  onClick: (e: any) => {
                    setProductInfo(rowOriginal);
                    // if (!rowOriginal.item_composto) {
                    setIsAddingProduct(true);
                    // }
                  },
                  content: <Plus strokeWidth={3} />,
                },
              ]}
              filters={filtro}
            />
          )
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
        {isAddingProduct && (
          <ModalComponente
            hasForm={false}
            header={productInfo.descricao_item}
            defaultW="w-[400px]"
            opened={isAddingProduct}
            onClose={() => setIsAddingProduct(false)}
            hasSaveButton={false}
          >
            <div className="flex flex-col gap-3">
              <div>
                <Input
                  name="quantity"
                  label="Quantidade"
                  formulario={formItem}
                  disabled={productInfo.item_composto}
                  defaultValue={productInfo.item_composto ? "1" : ""}
                  onKeyDown={(e: any) => {
                    e.stopPropagation();
                    if (e.key.includes("Enter")) {
                      e.preventDefault();
                      handleSubmit(submitEdicaoItem)(e);
                    }
                  }}
                  mascara="numerico"
                  required
                  error="Informe a quantidade"
                />
              </div>
              <div className="flex flex-row justify-end gap-2">
                <Button
                  loading={isLoading}
                  onClick={handleSubmit(submitEdicaoItem)}
                >
                  Confirmar
                </Button>
                <Button
                  className="bg-error"
                  onClick={() => setIsAddingProduct(false)}
                >
                  Cancelar
                </Button>
              </div>
            </div>
          </ModalComponente>
        )}
      </div>
    </div>
  );
};

export default NewItemComponenteAmpliacao;