import Container from "@/components/Forms/Container";
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 { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { cadastrarFabricante } from "@/requests/CRUD/Fabricante/cadastrarFabricante";
import { deletarFabricante } from "@/requests/CRUD/Fabricante/deletarFabricante";
import { editarFabricante } from "@/requests/CRUD/Fabricante/editarFabricante";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { GetForm } from "@/utils";
import { filtrarPorTexto } from "@/utils/filters";
import { useRef, useState } from "react";
import { FieldValues } from "react-hook-form";
import { IoTrashOutline } from "react-icons/io5";
import FormFabricante from "./FormFabricante";

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

  const formFiltro = GetForm();
  const filtrarTiposItensFabricante = (
    row: any,
    columnId: string,
    filterValue: any[]
  ) => {
    const value = row.original[columnId];

    if (!filterValue?.length) return true;
    if (!value) return false;

    const itensFabricante = String(value).split(", ");

    return filterValue.some(
      (optionSelected) =>
        itensFabricante.includes(optionSelected.label) ||
        itensFabricante.includes(optionSelected.value)
    );
  };

  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isImporting, setIsImporting] = useState(false);
  const columns = [
    {
      header: "Código",
      accessorKey: "id_fabricante",
    },
    {
      header: "Status",
      accessorKey: "status_fabricante",
      filterFn: filtrarPorTexto,
    },
    {
      header: "Nome",
      accessorKey: "nome_fabricante",
    },
    {
      header: "CNPJ",
      accessorKey: "cnpj_fabricante",
    },
    {
      header: "CEP",
      accessorKey: "cep_fabricante",
    },
    {
      header: "Rua",
      accessorKey: "rua_fabricante",
    },
    {
      header: "Número",
      accessorKey: "nro_fabricante",
    },
    {
      header: "Bairro",
      accessorKey: "bairro_fabricante",
    },
    {
      header: "Cidade",
      accessorKey: "cidade_fabricante",
    },
    {
      header: "Estado",
      accessorKey: "estado_fabricante",
    },
    {
      header: "Itens Vendidos",
      accessorKey: "tipos_itens_fabricante",
      filterFn: filtrarTiposItensFabricante,
    },
    {
      header: "E-mail",
      accessorKey: "email_fabricante",
    },
    {
      header: "Telefone",
      accessorKey: "telefone_fabricante",
    },
  ];

  // const formatFabricantesWithState = useCallback((
  //   arr: any[]
  // ) => {

  //   return formatarFabricantes(arr);
  // }, [tiposItens]);

  async function formatarFabricantes(arr: any[]) {
    let tiposItensList: any[] = [];
    if (tiposItens[0] == undefined) {
      tiposItensList = await listarTiposItensKit().then((res) => {
        setTiposItens(res);
        return res;
      });
    } else {
      tiposItensList = tiposItens;
    }

    return arr.map((fabricante) => {
      if (fabricante["tipos_itens_fabricante"]) {
        fabricante["tipos_itens_fabricante"] =
          fabricante["tipos_itens_fabricante"] == "*"
            ? "Todos"
            : tiposItensList
                .filter((tipoItem) =>
                  fabricante["tipos_itens_fabricante"]
                    .split(",")
                    .some(
                      (tipoItemFabricante: string) =>
                        tipoItemFabricante == tipoItem["id_tipo_item"]
                    )
                )
                .map((tipoItem) => tipoItem.nome_tipo_item)
                .join(", ");
      }
      return fabricante;
    });
  }

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

  const onEdifFunction = async (data: FieldValues) => {
    return editarFabricante(data);
  };

  const deleteFunction = async (id_fabricante: string) => {
    return deletarFabricante({ id_fabricante });
  };

  return (
    <Container>
      <InputGroup>
        <InputSelectComponent
          name="status_fabricante"
          label="Status Fabricante"
          formulario={formFiltro}
          options={[
            { label: "Todos", value: "*" },
            { label: "Ativo", value: "1" },
            { label: "Inativo", value: "0" },
          ]}
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              status_fabricante: e?.label,
            }));
          }}
        />
        <InputSelectComponent
          name="tipos_itens_fabricante"
          label="Itens"
          formulario={formFiltro}
          options={[
            { label: "Todos", value: "*" },
            ...tiposItens.map((tipoItem: any) => ({
              label: tipoItem.nome_tipo_item,
              value: tipoItem.nome_tipo_item,
            })),
          ]}
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              tipos_itens_fabricante: e,
            }));
          }}
          isMulti
        />
      </InputGroup>
      <>
        <ReactTable
          columns={columns}
          listFunction={listarFabricantes}
          formatFunction={formatarFabricantes}
          idCol="id_fabricante"
          isActiveCol="status_fabricante"
          canEdit
          canDesactive
          editFunction={onEdifFunction}
          createFunction={onSubmitFunction}
          Form={(props) => (
            <FormFabricante {...props} tiposItens={tiposItens} />
          )}
          pageName="Fabricante"
          actionButtons={(
            rowData: any,
            updateTable: any,
            setIsLoading: any
          ) => [
            {
              className: "bg-danger text-white",
              onClick: (e: any) => {
                handleSweetAlert(
                  {
                    icon: "error",
                    title: "Deletar Fabricante",
                    html: `Tem certeza que deseja <b>Deletar</b> o Fabricante <b>${rowData.nome_fabricante} </b>?`,
                  },
                  () => {
                    setIsLoading(true);
                    deleteFunction(rowData.id_fabricante)
                      .then(() => updateTable())
                      .finally(() => setIsLoading(false));
                  }
                );
              },
              content: <IoTrashOutline />,
            },
          ]}
          filters={filtro}
          manualFilters
        />
      </>
    </Container>
  );
};

export default FabricanteComponent;