Table

import { useCallback, useMemo } from "react";
import { type ColumnFiltersState } from "@tanstack/react-table";
import { parseAsArrayOf, parseAsInteger, parseAsString } from "nuqs";
import { DataTable } from "@/components/ui/data-table";
import { useUrlFilters } from "@/hooks/use-url-filter";

const SORT_ORDER_ENUM = {
  status_asc: 1,
  status_desc: 2,
  method_asc: 3,
  method_desc: 4,
  amount_asc: 5,
  amount_desc: 6,
  date_asc: 7,
  date_desc: 8,
} as const;

const PARSERS = {
  sortOrder: parseAsInteger,
  status: parseAsArrayOf(parseAsString),
  method: parseAsArrayOf(parseAsString),
  category: parseAsArrayOf(parseAsString),
};

export function UrlFilterTableDemo() {
  const {
    filters: urlFilters,
    paginationState,
    setFilter,
    onPaginationChange,
    createSortingHandlers,
  } = useUrlFilters(PARSERS);

  const { sortingState, handleSortingChange } = createSortingHandlers(SORT_ORDER_ENUM);

  const columnFilters = useMemo(() => {
    const next: ColumnFiltersState = [];
    if (urlFilters.status?.length) next.push({ id: "status", value: urlFilters.status });
    if (urlFilters.method?.length) next.push({ id: "method", value: urlFilters.method });
    if (urlFilters.category?.length) next.push({ id: "category", value: urlFilters.category });
    return next;
  }, [urlFilters]);

  const handleColumnFiltersChange = useCallback(
    (updater: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)) => {
      const next = typeof updater === "function" ? updater(columnFilters) : updater;
      const toValue = (id: string) =>
        (next.find((item) => item.id === id)?.value as string[]) ?? null;

      setFilter({
        status: toValue("status"),
        method: toValue("method"),
        category: toValue("category"),
      });
    },
    [columnFilters, setFilter],
  );

  return (
    <DataTable
      data={payments}
      columns={columns}
      sorting={sortingState}
      columnFilters={columnFilters}
      pagination={paginationState}
      onSortingChange={handleSortingChange}
      onColumnFiltersChange={handleColumnFiltersChange}
      onPaginationChange={onPaginationChange}
    />
  );
}

const table = useReactTable({
  data,
  columns,
  autoResetPageIndex: false,
  state: {
    sorting,
    columnFilters,
    pagination,
  },
  onSortingChange,
  onColumnFiltersChange,
  onPaginationChange,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});