EvoBGP/apps/web/src/hooks/use-client-data-grid.ts

import { useMemo, useState } from 'react'
import {
  type ColumnDef,
  type FilterFn,
  type TableOptions,
  useReactTable,
} from '@tanstack/react-table'

import {
  createClientDataGridOptions,
  createTextGlobalFilter,
} from '@/lib/data-grid-defaults'

interface UseClientDataGridOptions<TData extends object> {
  data: TData[]
  columns: ColumnDef<TData>[]
  getSearchText: (row: TData) => string
  getRowId: (row: TData) => string
  pageSize?: number
  tableOptions?: Partial<TableOptions<TData>>
  globalFilterFn?: FilterFn<TData>
}

export function useClientDataGrid<TData extends object>({
  data,
  columns,
  getSearchText,
  getRowId,
  pageSize = 10,
  tableOptions,
  globalFilterFn,
}: UseClientDataGridOptions<TData>) {
  const [globalFilter, setGlobalFilter] = useState('')

  const filterFn = useMemo(
    () => globalFilterFn ?? createTextGlobalFilter(getSearchText),
    [getSearchText, globalFilterFn],
  )

  const table = useReactTable({
    data,
    columns,
    state: { globalFilter },
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: filterFn,
    ...createClientDataGridOptions<TData>({
      initialState: { pagination: { pageSize } },
      ...tableOptions,
    }),
    getRowId,
  })

  const filteredCount = table.getFilteredRowModel().rows.length

  return {
    table,
    globalFilter,
    setGlobalFilter,
    filteredCount,
  }
}