import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { downloadPDF } from "@/lib/jspdf";
import { downloadToExcel } from "@/lib/xlsx";
import {
  ColumnDef,
  ColumnResizeMode,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Plus,
  Search,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BsThreeDotsVertical } from "react-icons/bs";
import { FaList } from "react-icons/fa";
import { MdNorth, MdOutlineFileCopy } from "react-icons/md";
import { RiFileExcel2Line } from "react-icons/ri";
import { useReactToPrint } from "react-to-print";
import { twMerge } from "tailwind-merge";
import Button from "../Forms/Button";
import Input from "../Forms/Input";
import ModalComponente from "../Modal/ModalComponente";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import ReactTableRow from "./ReactTableRow";

// let datas: any[] = [];

interface IReactTableProps {
  columns: ColumnDef<any, any>[];
  pageName?: string;
  createFunction?(data: FieldValues): Promise<any>;
  listFunction?: (...args: any) => Promise<any[]>;
  formatFunction?(arr: any): Promise<any> | any;
  idCol?: string;
  isActiveCol?: string;
  refreshFunction?(data: any): Promise<void>;
  actionButtons?: (
    rowData: any,
    updateTable: any,
    setIsLoading: any,
    rowInfos: any,
  ) => {
    className: string;
    onClick: (e: any) => void;
    content: JSX.Element | undefined;
  }[];
  canEdit?: boolean;
  canDesactive?: boolean;
  canAnon?: boolean;
  canRefresh?: boolean;
  canhistorico?: boolean;
  canProposta?: boolean;
  canDelete?: boolean;
  canContrato?: boolean;
  cannotFilter?: boolean;
  editFunction?(data: any): Promise<any>;
  deleteFunction?(data: any): Promise<any>;
  customizedFunction?(data: any): Promise<any>;
  customizedComponents?: any;
  rowClassName?: (row: any) => string;
  Form?: ({}: any) => JSX.Element;
  historicoFunction?: ({}: any) => JSX.Element;
  contratoFunction?: ({}: any) => JSX.Element;
  propostaFunction?: ({}: any) => JSX.Element;
  disabledFields?: string[];
  data?: any;
  tfoot?: JSX.Element;
  modalWidth?: string;
  guardaDado?: string;
  tableDivClassName?: string;
  filters?: any;
  columnOrder?: string[];
  formatExcel?: ({}: any) =>
    | Promise<{ data: any[]; columns: any[]; name: string }>
    | { data: any[]; columns: any[]; name: string };
  manualFilters?: boolean;
  hidePagination?: boolean;
}

const ReactTable = ({
  listFunction = async (): Promise<any[]> =>
    new Promise((resolve, reject) => resolve([])),
  filters,
  manualFilters,
  ...rest
}: IReactTableProps) => {
  const props = { listFunction, ...rest };
  const [sorting, setSorting] = useState<any[]>([]);
  const [columnOrder, setColumnOrder] = useState<string[]>(
    props.columnOrder ?? [],
  );

  const [columnResizeMode, setColumnResizeMode] =
    useState<ColumnResizeMode>("onChange");
  const [filtering, setFiltering] = useState("");
  const [renderedData, setRenderedData] = useState<any[]>([]);
  const [data, setData] = useState<any[]>([]);
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
  const [openModalCreate, setOpenModalCreate] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isListed, setListed] = useState(false);

  useEffect(() => {
    if (props.data) setData(props.data);
  }, [props.data]);

  const onSubmitFunction = (newData: any) => {
    setIsLoading(true);
    props.createFunction &&
      props
        .createFunction(newData)
        .then(() => {
          props.listFunction().then((res: any) => {
            localStorage.setItem("tableList", JSON.stringify(res));
            setData(res);
            setOpenModalCreate(false);
          });
        })
        .finally(() => setIsLoading(false));
  };

  useEffect(() => {
    if (!isListed) {
      props.listFunction().then((res: any) => {
        // localStorage.setItem("tableList", JSON?.stringify(res));
        if (!data[0] && !isLoaded) {
          setData(res);
        }
        setListed(true);
      });
    }

    // setTimeout(() => {
    //   setIsLoaded(true);
    // }, 6000);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.listFunction]);

  useEffect(() => {
    async function formatRenderedData() {
      const newData = data?.reduce((acc: any[], row: any) => {
        const rowData = { ...row };
        if (props.isActiveCol !== undefined) {
          rowData[props.isActiveCol] = Boolean(+rowData[props.isActiveCol])
            ? "Ativo"
            : "Inativo";
        }
        acc = [...acc, { ...rowData }];
        return acc;
      }, []);
      const newFormatedData = await (props.formatFunction
        ? await props.formatFunction([...newData])
        : newData);

      setRenderedData(newFormatedData);
      if (isListed) setIsLoaded(true);
    }
    if (data?.length == 0) {
      setRenderedData([]);
      if (isListed) setIsLoaded(true);
    } else {
      formatRenderedData();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  let newColumns: any = props.columns;

  const status = newColumns.find(
    (obj: any) => obj.accessorKey == props.isActiveCol,
  );
  if (status) {
    newColumns = newColumns.filter((e: any) => e.header != status.header);
    newColumns.splice(1, 0, status);
  }

  // Adicionar sortingFn padrão para colunas que habilitam sorting mas não têm função
  newColumns = newColumns.map((column: any) => {
    // Se a coluna tem enableSorting explicitamente true ou undefined (padrão é true)
    // e não tem uma sortingFn definida, adicionar função padrão
    if (column.enableSorting !== false && !column.sortingFn) {
      return {
        ...column,
        sortingFn: "auto", // Usa a função de sorting automático do Tanstack
      };
    }
    return column;
  });

  const filterConcatenatedValues = (
    row: any,
    columnId: string,
    filterValue: string[],
  ) => {
    if (!filterValue || filterValue.length === 0) {
      return true; // Retorna todas as linhas
    }

    const cellValue = row.getValue(columnId);
    const cellValuesArray = cellValue ? cellValue.split(",") : [];
    return filterValue.some((filter) => cellValuesArray.includes(filter));
  };

  // newColumns = newColumns.map((column: any) => {
  //   if (filters && Object.keys(filters).includes(column.accessorKey)) {
  //     let filterValues;
  //     if (Array.isArray(filters[column.accessorKey])) {
  //       filterValues =
  //         filters[column.accessorKey]
  //           ?.filter((res: any) => res.value !== "*")
  //           .map((filter: any) => filter.label) || [];
  //     } else {
  //       filterValues = filters[column.accessorKey];
  //     }
  //     return {
  //       filterFn: filterConcatenatedValues,
  //       filterValue: filterValues,
  //       ...column,
  //       header: column.header || "Coluna",

  //       enableColumnFilter: true,
  //       cell: (info: any) => info.getValue(),
  //     };
  //   }
  //   return column;
  // });

  const table = useReactTable({
    data: renderedData,
    columns: newColumns,
    columnResizeMode,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      sorting: sorting,
      globalFilter: filtering,
      columnVisibility,
      columnOrder,
      // columnFilters,
    },
    getFilteredRowModel: getFilteredRowModel(),
    onSortingChange: setSorting,
    onGlobalFilterChange: setFiltering,
    initialState: {
      pagination: {
        pageSize: 10, // default igual ao print
      },
    },
  });
  useEffect(() => {
    if (filters && !manualFilters) {
      table.getHeaderGroups().forEach((headerGroup: any) => {
        headerGroup.headers.forEach((header: any) => {
          if (Object.keys(filters).includes(header.id)) {
            let filterValues;
            if (Array.isArray(filters[header.id])) {
              const reslog = filters[header.id].map((res: any) => res.value);
              filterValues =
                filters[header.id]
                  ?.filter((res: any) => res.value !== "*")
                  .map((filter: any) => filter.label) || [];
              header.column.setFilterValue(filterValues);
            } else {
              filterValues = filters[header.id];
              header.column.setFilterValue([filterValues]);
            }

            // filters[header.id]
            //   ?.filter((res: any) => res.value != "*")
            //   .map((filter: any) => filter.label) || {};
          }
        });
      });
    } else if (filters) {
      table.getHeaderGroups().map((headerGroup: any) => {
        headerGroup.headers.map((header: any) => {
          if (Object.keys(filters).includes(header.id)) {
            header.column.setFilterValue(filters[header.id]);
          }
        });
      });
    }
  }, [filters]);

  const contentRef = useRef<HTMLTableElement>(null);
  const handlePrint = useReactToPrint({
    content: () => contentRef.current,
  });

  const range = (start: number, end: number) =>
    Array.from({ length: end - start + 1 }, (_, i) => i + start);

  const getPageItems = (current: number, total: number, siblingCount = 1) => {
    const totalNumbers = siblingCount * 2 + 3; // atual ±sibling + atual + 2 bordas
    const totalBlocks = totalNumbers + 2; // adicionando dois "..."
    if (total <= totalBlocks) return range(1, total);

    const startPage = Math.max(2, current - siblingCount);
    const endPage = Math.min(total - 1, current + siblingCount);

    const hasLeftSpill = startPage > 2;
    const hasRightSpill = total - 1 - endPage > 0;

    if (hasLeftSpill && !hasRightSpill) {
      const extra = totalNumbers - (endPage - startPage + 1) - 1;
      return [1, "...", ...range(endPage - extra, endPage), total];
    } else if (!hasLeftSpill && hasRightSpill) {
      const extra = totalNumbers - (endPage - startPage + 1) - 1;
      return [1, ...range(2, 2 + extra), "...", total];
    } else {
      return [1, "...", ...range(startPage, endPage), "...", total];
    }
  };
  const renderSkeletonRows = () => {
    const { pageSize } = table.getState().pagination;
    const lastHeaderGroup =
      table.getHeaderGroups()[table.getHeaderGroups().length - 1];
    const leafHeaders = lastHeaderGroup ? lastHeaderGroup.headers : [];
    const hasActions =
      props.canEdit ||
      props.canDesactive ||
      props.canRefresh ||
      props.canAnon ||
      props.canhistorico ||
      props.canProposta ||
      props.canContrato ||
      props.canDelete ||
      props.actionButtons;

    const cellsCount = leafHeaders.length + (hasActions ? 1 : 0);
    const widths = ["w-[80%]", "w-[80%]", "w-[80%]", "w-[80%]", "w-[80%]"]; // variação estética

    return Array.from({ length: pageSize || 10 }).map((_, rIdx) => (
      <tr key={`sk-row-${rIdx}`} className="opacity-80">
        {Array.from({ length: cellsCount }).map((__, cIdx) => (
          <td key={`sk-cell-${rIdx}-${cIdx}`} className="p-3">
            <div
              className={`h-4 ${widths[cIdx % widths.length]} rounded bg-trueGray-200/70 dark:bg-trueGray-800 animate-pulse`}
            />
          </td>
        ))}
      </tr>
    ));
  };
  return (
    <>
      <div className="w-full tableSection flex flex-col gap-3">
        <div className="flex flex-col max-sm:flex-col-reverse sm:flex-row gap-2 justify-between">
          {!props.cannotFilter && (
            <div className="relative ">
              <Search
                className="absolute left-3 top-1/2 z-1 -translate-y-1/2 text-trueGray-400
                "
                size={18}
              />
              <Input
                type="text"
                prefixWidth={"35px"}
                placeholder="Pesquisar..."
                value={filtering}
                onChange={(e) => setFiltering(e.target.value)}
                className="pl-10! pr-4 py-2 w-full rounded-lg border border-trueGray-300
                 focus:outline-none focus:ring-2 focus:ring-gray-400"
              />
            </div>
          )}

          <div className="flex items-center max-sm:flex-row-reverse gap-2">
            {props.createFunction && (
              <Button
                type="button"
                onClick={() => setOpenModalCreate(true)}
                className="bg-primary font-medium max-sm:text-sm max-sm:rounded-sm items-center max-sm:px-2 gap-2 h-fit rounded-xl"
              >
                <Plus size={15} />
                Adicionar {props.pageName}
              </Button>
            )}
            {props.customizedComponents &&
              props.customizedComponents.map(
                (customize: any, index: number) => {
                  const Component = customize.component || "div"; // Define o componente dinamicamente, com "div" como fallback
                  return (
                    <Component
                      key={index} // Key única para cada item
                      {...customize.props} // Passa as propriedades dinamicamente
                    >
                      {customize.icon && customize.icon}{" "}
                      {/* Renderiza o ícone, se existir */}
                      {customize.label && <span>{customize.label}</span>}{" "}
                      {/* Renderiza o texto, se existir */}
                      {customize.children && customize.children}{" "}
                      {/* Renderiza filhos, se forem fornecidos */}
                    </Component>
                  );
                },
              )}

            <Popover>
              <PopoverTrigger asChild>
                <div
                  className="popover-hover:block p-1  hover:bg-stroke react-icons__bs__BsThreeDotsVertical
                  dark:bg-black   rounded-md cursor-pointer"
                >
                  <BsThreeDotsVertical className="react-icons__bs__BsThreeDotsVertical" />
                </div>
              </PopoverTrigger>
              <PopoverContent className="popover w-fit h-fit p-1">
                <div className="flex flex-row rounded-md overflow-hidden justify-between bg-bodydark2 dark:bg-black opacity-80">
                  <button
                    className="rounded-none text-white bg-bodydark2 dark:bg-black p-2 hover:bg-graydark dark:hover:bg-form-strokedark"
                    title="Copiar Tabela"
                    onClick={async () => {
                      let dataToCopy: any = {
                        data: renderedData ?? [],
                        columns: props.columns,
                        name: props.pageName,
                        method: "download",
                      };

                      if (props.formatExcel) {
                        dataToCopy = await props.formatExcel({
                          data: renderedData,
                          originalData: data,
                          columns: props.columns,
                          name: props.pageName,
                          method: "download",
                        });
                      }

                      downloadPDF(dataToCopy);
                    }}
                  >
                    <MdOutlineFileCopy />
                  </button>

                  <button
                    className="rounded-none text-white bg-bodydark2 dark:bg-black p-2 hover:bg-graydark dark:hover:bg-form-strokedark"
                    title="Exportar para o Excel"
                    onClick={async () => {
                      let dataToExcel = {
                        data: renderedData,
                        columns: props.columns,
                        name: props.pageName,
                      };
                      if (props.formatExcel) {
                        dataToExcel = await props.formatExcel({
                          data: renderedData,
                          originalData: data,
                          columns: props.columns,
                          name: props.pageName,
                        });
                      }
                      downloadToExcel(dataToExcel);
                    }}
                  >
                    <RiFileExcel2Line />
                  </button>

                  {/* <button
                    className="rounded-none text-white bg-bodydark2 dark:bg-black p-2 hover:bg-graydark dark:hover:bg-form-strokedark"
                    title="Baixar PDF"
                    onClick={(e) => {
                      e.stopPropagation();
                      // downloadPDF({
                      //   data: renderedData,
                      //   columns: props.columns,
                      //   name: props.pageName,
                      //   method: "download",
                      // });
                      handlePrint(e);
                    }}
                  >
                    <AiOutlineFilePdf />
                  </button> */}

                  <DropdownMenu>
                    <DropdownMenuTrigger
                      className="rounded-none text-white bg-bodydark2 dark:bg-black p-2 hover:bg-graydark dark:hover:bg-form-strokedark"
                      title="Colunas"
                    >
                      <FaList />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="overflow-auto h-[200px]">
                      {table
                        .getAllColumns()
                        .filter((column) => column.getCanHide())

                        .map((column) => {
                          const header: any = column.columnDef.header;
                          return (
                            <DropdownMenuCheckboxItem
                              key={column.id}
                              className={"capitalize"}
                              checked={column.getIsVisible()}
                              onCheckedChange={(value) =>
                                column.toggleVisibility(!!value)
                              }
                            >
                              {header}
                            </DropdownMenuCheckboxItem>
                          );
                        })}
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </PopoverContent>
            </Popover>
          </div>
        </div>

        <div
          className={twMerge("w-full overflow-x-auto", props.tableDivClassName)}
        >
          <div
            className="relative overflow-y-auto rounded-md border"
            style={{ maxHeight: "60vh" }}
          >
            {/* No celular a tabela mantém a largura natural das colunas e rola
                para o lado, em vez de espremer tudo e ficar ilegível. */}
            <table className="w-full max-sm:min-w-max" ref={contentRef}>
              <thead className="sticky top-0 bg-coolGray-100  dark:bg-black z-1">
                {table.getHeaderGroups().map((headerGroup: any) => (
                  <tr key={headerGroup.id}>
                    {(props.canEdit ||
                      props.canDesactive ||
                      props.canRefresh ||
                      props.canAnon ||
                      props.canhistorico ||
                      props.canProposta ||
                      props.canContrato ||
                      props.canDelete ||
                      props.actionButtons) &&
                      0 == headerGroup.depth && (
                        <th
                          className="w-[0px] text-coolGray-500"
                          rowSpan={
                            table
                              .getHeaderGroups()
                              .reduce(
                                (maximoAtual, obj) =>
                                  Math.max(maximoAtual, obj.depth),
                                0,
                              ) + 1
                          }
                        >
                          Ações
                        </th>
                      )}
                    {headerGroup.headers.map((header: any) => (
                      <th
                        className={`w-fit ${header.column.parent ? newColumns.find((e: any) => e.header == header.column.parent?.id)?.className : newColumns[header.index]?.className}`}
                        key={header.id}
                        // rowSpan={header.rowSpan}
                        rowSpan={1}
                        onClick={header.column.getToggleSortingHandler()}
                        {...{
                          colSpan: header.colSpan,
                          style: {
                            width: header.getSize(),
                          },
                        }}
                      >
                        {header.isPlaceholder ? null : (
                          <div>
                            <span className="flex text-coolGray-500 dark:text-white flex-row items-center font-normal justify-center whitespace-nowrap	">
                              {header.column.getIsSorted() != false && (
                                <MdNorth
                                  style={{
                                    rotate:
                                      header.column.getIsSorted() == "asc"
                                        ? "0deg"
                                        : "180deg",
                                    transition: "0.2s",
                                  }}
                                />
                              )}

                              {flexRender(
                                header.column.columnDef.header,
                                header.getContext(),
                              )}
                            </span>
                          </div>
                        )}
                        <div
                          {...{
                            onMouseDown: header.getResizeHandler(),
                            onTouchStart: header.getResizeHandler(),
                            className: `resizer ${
                              header.column.getIsResizing() ? "isResizing" : ""
                            }`,
                            style: {
                              transform:
                                columnResizeMode === "onEnd" &&
                                header.column.getIsResizing()
                                  ? `translateX(${
                                      table.getState().columnSizingInfo
                                        .deltaOffset
                                    }px)`
                                  : "",
                            },
                          }}
                        />
                      </th>
                    ))}
                  </tr>
                ))}
              </thead>
              <tbody>
                {!isLoaded ? (
                  renderSkeletonRows()
                ) : !table?.getRowModel()?.rows[0] ? (
                  <tr>
                    <td
                      colSpan={
                        table
                          .getHeaderGroups()
                          .map((headerGroups) =>
                            headerGroups.headers.map((header) => header),
                          )
                          .flat().length +
                        (props.canEdit ||
                        props.canDesactive ||
                        props.canRefresh ||
                        props.canAnon ||
                        props.canhistorico ||
                        props.canProposta ||
                        props.canDelete ||
                        props.canContrato ||
                        props.actionButtons
                          ? 1
                          : 0)
                      }
                      className="text-center "
                    >
                      Nenhum registro encontrado
                    </td>
                  </tr>
                ) : (
                  table
                    .getRowModel()
                    .rows.map((row) => (
                      <ReactTableRow
                        key={row.id}
                        row={row}
                        setData={setData}
                        data={data}
                        {...props}
                      />
                    ))
                )}
              </tbody>
              {props.tfoot && props.tfoot}
            </table>
          </div>
          {/* </div> */}
          <div
            className={`sticky bottom-0 z-1 bg-white/90 dark:bg-black/90 backdrop-blur border-t p-2 ${props?.hidePagination ? "hidden" : ""}`}
          >
            {(() => {
              const { pageIndex, pageSize } = table.getState().pagination;
              const total = table.getFilteredRowModel().rows.length;
              const start = total === 0 ? 0 : pageIndex * pageSize + 1;
              const end =
                total === 0 ? 0 : Math.min(start + pageSize - 1, total);

              const pageCount = table.getPageCount();
              const current = pageIndex + 1;
              const items = getPageItems(current, pageCount, 1);

              const baseBtn =
                "h-8 w-8 px-2 rounded-lg border text-xs bg-white text-black hover:bg-trueGray-100 disabled:opacity-50 disabled:cursor-not-allowed " +
                "dark:bg-black dark:border-trueGray-700 dark:hover:bg-trueGray-900";

              const activeBtn =
                "h-8 w-8 px-2 rounded-lg border text-xs bg-primary text-white border-primary";

              return (
                <div className="w-full flex items-center justify-between gap-3">
                  {/* ESQUERDA: Linhas por pág. */}
                  <div className="flex items-center gap-2 text-sm">
                    <span>Linhas por pág.</span>
                    <Select
                      value={`${table.getState().pagination.pageSize}`}
                      onValueChange={(value) =>
                        table.setPageSize(Number(value))
                      }
                    >
                      <SelectTrigger className="h-8 w-[72px]">
                        <SelectValue
                          placeholder={table.getState().pagination.pageSize}
                        />
                      </SelectTrigger>
                      <SelectContent side="top">
                        {[5, 10, 20, 40, 50].map((size) => (
                          <SelectItem key={size} value={`${size}`}>
                            {size}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* CENTRO: Paginação numérica com reticências */}
                  <div className="flex items-center gap-1">
                    <button
                      className={baseBtn}
                      disabled={!table.getCanPreviousPage()}
                      onClick={() => table.setPageIndex(0)}
                      title="Primeira"
                    >
                      <ChevronsLeft size={16} />
                    </button>
                    <button
                      className={baseBtn}
                      disabled={!table.getCanPreviousPage()}
                      onClick={() => table.previousPage()}
                      title="Anterior"
                    >
                      <ChevronLeft size={16} />
                    </button>

                    {items.map((it, idx) =>
                      it === "..." ? (
                        <span
                          key={`dots-${idx}`}
                          className="h-8 w-8 px-2 inline-flex items-center justify-center text-xs text-trueGray-500"
                        >
                          ...
                        </span>
                      ) : (
                        <button
                          key={it}
                          className={it === current ? activeBtn : baseBtn}
                          onClick={() => table.setPageIndex((it as number) - 1)}
                        >
                          {it}
                        </button>
                      ),
                    )}

                    <button
                      className={baseBtn}
                      disabled={!table.getCanNextPage()}
                      onClick={() => table.nextPage()}
                      title="Próxima"
                    >
                      <ChevronRight size={16} />
                    </button>
                    <button
                      className={baseBtn}
                      disabled={!table.getCanNextPage()}
                      onClick={() => table.setPageIndex(pageCount - 1)}
                      title="Última"
                    >
                      <ChevronsRight size={16} />
                    </button>
                  </div>

                  {/* DIREITA: "x-y de total" */}
                  <div className="text-sm text-trueGray-600 dark:text-trueGray-300">
                    {start}-{end} de {total}
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      </div>

      {props.Form && (
        <ModalComponente
          hasForm={false}
          header={`Criação de ${props.pageName}`}
          // saved={onSubmitFunction}
          defaultW={props.modalWidth}
          hasSaveButton={false}
          opened={openModalCreate}
          onClose={() => setOpenModalCreate(false)}
          className={props.modalWidth || "overflow-x-hidden"}
        >
          <props.Form
            onSubmitFunction={onSubmitFunction}
            defaultValues={{}}
            // defaultValues={table.getAllColumns().map((col: any) => {
            //   const obj: any = {};
            //   obj[col.id] = "";
            //   return obj;
            // })}
            className="p-4"
            columns={props.columns}
            listdata={data}
            closeForm={() => {
              setOpenModalCreate(false);
            }}
          >
            {/* <footer className="bottom-2 sticky w-[100px] flex items-center justify-center bg-transparent"> */}
            <div className="flex w-full justify-end sticky left-[100%] bottom-0 p-2 bg-white dark:bg-black">
              <Button loading={isLoading} className=" bg-success rounded-md">
                Salvar
              </Button>
            </div>

            {/* </footer> */}
            {/* <div className="sticky  w-full justify-end">
              
            </div> */}
          </props.Form>
        </ModalComponente>
      )}

      {/* {(props.FormCadastro || props.Form) && (
        <ModalReact
          title={`Criação de ${props.pageName}`}
          open={openModalCreate}
          onClose={() => setOpenModalCreate(false)}
          className={props.modalWidth || "w-[80%]"}
        >
          {props.FormCadastro ? (
            <props.FormCadastro
              onSubmitFunction={onSubmitFunction}
              defaultValues={table.getAllColumns().map((col: any) => {
                const obj: any = {};
                obj[col.id] = "";
                return obj;
              })}
              className="p-4"
            >
              <div className="flex flex-row-reverse gap-1 border-t border-gray-950 pt-4">
                <Button loading={isLoading}>Salvar</Button>
                <Button
                  type="button"
                  className="bg-body"
                  onClick={() => setOpenModalCreate(false)}
                >
                  Fechar
                </Button>
              </div>
            </props.FormCadastro>
          ) : (
            <props.Form
              onSubmitFunction={onSubmitFunction}
              defaultValues={table.getAllColumns().map((col: any) => {
                const obj: any = {};
                obj[col.id] = "";
                return obj;
              })}
              className="p-4"
            >
              <div className="flex flex-row-reverse gap-1 border-t border-gray-950 pt-4">
                <Button loading={isLoading}>Salvar</Button>
                <Button
                  type="button"
                  className="bg-body"
                  onClick={() => setOpenModalCreate(false)}
                >
                  Fechar
                </Button>
              </div>
            </props.Form>
          )}
        </ModalReact>
      )} */}
    </>
  );
};

export default ReactTable;