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 { cadastrarTiposTelhados } from "@/requests/CRUD/TiposTelhados/cadastrarTiposTelhados";
import { editarTiposTelhados } from "@/requests/CRUD/TiposTelhados/editarTiposTelhados";
import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados";
import { GetForm } from "@/utils";
import { filtrarPorMultiSelecao, filtrarPorTexto } from "@/utils/filters";
import { useCallback, useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import FormTiposTelhados from "../CXESCAD008/FormTiposTelhados";
//nao aguento mais bugs

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

  const formFiltro = GetForm();
  const columns = [
    {
      header: "ID",
      accessorKey: "id_telhado",
    },
    {
      header: "Status Telhado",
      accessorKey: "status_telhado",
      filterFn: filtrarPorTexto,
    },
    {
      header: "Nome Telhado",
      accessorKey: "nome_telhado",
    },
    {
      header: "Categoria Telhado",
      accessorKey: "nome_categoria_telhado",
      filterFn: filtrarPorMultiSelecao,
    },
  ];

  useEffect(() => {
    listarCategoriasTelhados().then(setCategoriasTelhados);
  }, []);

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

  const onSubmitFunction = async (data: FieldValues) => {
    return cadastrarTiposTelhados(data);
  };
  const editFuncion = async (data: FieldValues) => {
    delete data["nome_categoria_telhado"];

    return editarTiposTelhados(data);
  };

  return (
    <>
      {/*
       * OS: 323047
       * Data: 18/04/2024
       * Leonardo
       */
      /* <Breadcrumb pageName='Consulta Tipos Telhados' /> */}
      <Container>
        <InputGroup>
          <InputSelectComponent
            name="status_telhado"
            label="Status Telhado"
            formulario={formFiltro}
            options={[
              { label: "Todos", value: "*" },
              { label: "Ativo", value: "1" },
              { label: "Inativo", value: "0" },
            ]}
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                status_telhado: 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,
              })),
            ]}
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                nome_categoria_telhado: e,
              }));
            }}
            isMulti
          />
        </InputGroup>
        <ReactTable
          columns={columns}
          listFunction={listarTiposTelhados}
          idCol="id_telhado"
          isActiveCol="status_telhado"
          canEdit
          canDesactive
          editFunction={editFuncion}
          createFunction={onSubmitFunction}
          Form={CustomForm}
          pageName="Tipos Telhados"
          filters={filtro}
          manualFilters
        />
      </Container>
    </>
  );
};

export default ConsultaTiposTelhados;