import Container from "@/components/Forms/Container";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarCategoriasTelhados } from "@/requests/CRUD/CategoriasTelhado/listarCategoriaTelhado";
import { cadastrarEstrutura } from "@/requests/CRUD/EstruturaFixacao/cadastrarEstruturaFixacao";
import { editarEstruturaFixacao } from "@/requests/CRUD/EstruturaFixacao/editarEstruturaFixacao";
import { listarEstruturas } from "@/requests/CRUD/EstruturaFixacao/listarEstruturaFixacao";
import { GetForm } from "@/utils";
import { filtrarPorMultiSelecao, filtrarPorTexto } from "@/utils/filters";
import { useCallback, useEffect, useState } from "react";
import FormEstruturaFixacao from "../CXESCAD009/FormEstruturaFixacao";

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

  const formFiltro = GetForm();
  const columns = [
    {
      header: "ID",
      accessorKey: "id_estrutura",
    },
    {
      header: "Nome Estrutura",
      accessorKey: "nome_estrutura",
    },
    {
      header: "Categoria",
      accessorKey: "nome_categoria_telhado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Status Estrutura",
      accessorKey: "status_estrutura",
      filterFn: filtrarPorTexto,
    },
  ];

  useEffect(() => {
    listarCategoriasTelhados().then((res) => {
      setCategoriasTelhados(res);
      // setLoaded(true);
    });
  }, []);

  const CustomForm: any = useCallback(
    (props: any) =>
      categoriasTelhados.length > 0 && (
        <FormEstruturaFixacao
          {...props}
          categoriasTelhados={categoriasTelhados}
        />
      ),
    [categoriasTelhados]
  );

  const submitEditarEstrutura = async (data: any) => {
    delete data.nome_categoria_telhado;
    return editarEstruturaFixacao(data);
  };

  return (
    <>
      {/*
       * OS: 323047
       * Data: 18/04/2024
       * Leonardo
       */
      /* <Breadcrumb pageName='Consulta Estrutura de Fixação' /> */}
      <Container>
        <InputGroup>
          <InputSelectComponent
            name="status_estrutura"
            label="Status Estrutura"
            formulario={formFiltro}
            options={[
              { label: "Todos", value: "*" },
              { label: "Ativo", value: "1" },
              { label: "Inativo", value: "0" },
            ]}
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                status_estrutura: e?.label,
              }));
            }}
          />
          <InputSelectComponent
            name="nome_categoria_telhado"
            label="Categoria"
            formulario={formFiltro}
            options={[
              { label: "Todos", value: "*" },
              ...categoriasTelhados.map((categoria: any) => ({
                label: categoria.nome_categoria_telhado,
                value: categoria.nome_categoria_telhado,
                // value: categoria.id_categoria_telhado,
              })),
            ]}
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                nome_categoria_telhado: e,
              }));
            }}
            isMulti
          />
        </InputGroup>
        <ReactTable
          columns={columns}
          listFunction={listarEstruturas}
          idCol="id_estrutura"
          isActiveCol="status_estrutura"
          canEdit
          canDesactive
          editFunction={submitEditarEstrutura}
          createFunction={cadastrarEstrutura}
          Form={CustomForm}
          pageName="Tipo de Estrutura"
          filters={filtro}
          manualFilters
        />
      </Container>
    </>
  );
};

export default ConsultaEstruturaFixacao;