Pagination

import {useEffect, useMemo, useState} from "react"

import {CodeHighlight} from "@qui/mdx-docs"
import {QButton, QPagination, QTextInput} from "@qui/react"
import {
  Column,
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  QTable,
  QTbody,
  QTd,
  QTh,
  QThead,
  QTr,
  Table,
  useReactTable,
  useTablePagination,
} from "@qui/react-table"

import {makePersonData, Person} from "~utils/data"

export default function Pagination() {
  const columns = useMemo<ColumnDef<Person>[]>(
    () => [
      {
        columns: [
          {
            accessorKey: "firstName",
            cell: (info) => info.getValue(),
            header: "First Name",
          },
          {
            accessorFn: (row) => row.lastName,
            cell: (info) => info.getValue(),
            header: "Last Name",
            id: "lastName",
          },
        ],

        header: "Name",
      },
      {
        columns: [
          {
            accessorKey: "age",
            header: "Age",
          },
          {
            accessorKey: "visits",
            header: "Visits",
          },
          {
            accessorKey: "status",
            header: "Status",
          },
          {
            accessorKey: "progress",
            header: "Profile Progress",
          },
        ],
        header: "Info",
      },
    ],
    [],
  )

  const [data, setData] = useState<Person[]>([])
  const refreshData = () => setData(() => makePersonData(50000))

  useEffect(() => {
    setData(makePersonData(50000))
  }, [])

  return (
    <div className="inline-flex flex-col gap-2 overflow-x-auto">
      <QButton className="self-start" onClick={refreshData} variant="outline">
        Refresh Data
      </QButton>

      <LocalTable columns={columns} data={data} />
    </div>
  )
}

function LocalTable({
  columns,
  data,
}: {
  columns: ColumnDef<Person>[]
  data: Person[]
}) {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  const paginationProps = useTablePagination(table)

  return (
    <div className="overflow-x-auto p-2">
      <div className="h-2" />
      <QTable>
        <QThead>
          {table.getHeaderGroups().map((headerGroup) => (
            <QTr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <QTh key={header.id} colSpan={header.colSpan}>
                    {header.isPlaceholder ? null : (
                      <div className="inline-flex flex-col gap-1">
                        <div className="inline-flex items-center justify-center">
                          {flexRender(
                            header.column.columnDef.header,
                            header.getContext(),
                          )}
                        </div>
                        {header.column.getCanFilter() ? (
                          <Filter column={header.column} table={table} />
                        ) : null}
                      </div>
                    )}
                  </QTh>
                )
              })}
            </QTr>
          ))}
        </QThead>
        <QTbody>
          {table.getRowModel().rows.map((row) => {
            return (
              <QTr key={row.id}>
                {row.getVisibleCells().map((cell) => {
                  return (
                    <QTd key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </QTd>
                  )
                })}
              </QTr>
            )
          })}
        </QTbody>
      </QTable>

      <div className="mt-4">
        <QPagination
          {...paginationProps}
          renderPageMeta={(context) =>
            `${context.currentPage} of ${context.totalPages}`
          }
          rowsPerPageLabel="Show"
          rowsPerPageOptions={[10, 20, 50]}
        />
      </div>

      <CodeHighlight
        className="mt-4 w-fit"
        code={JSON.stringify(
          {pagination: table.getState().pagination},
          null,
          2,
        )}
        disableCopy
        language="json"
      />
    </div>
  )
}

function Filter({
  column,
  table,
}: {
  column: Column<Person, any>
  table: Table<Person>
}) {
  const firstValue = table
    .getPreFilteredRowModel()
    .flatRows[0]?.getValue(column.id)

  const columnFilterValue = column.getFilterValue()

  return typeof firstValue === "number" ? (
    <div className="flex gap-2">
      <QTextInput
        className="w-24"
        inputProps={{min: 0, type: "number"}}
        onChange={(e, value) =>
          column.setFilterValue((old: [number, number]) => [value, old?.[1]])
        }
        placeholder="Min"
        size="s"
        value={(columnFilterValue as [number, number])?.[0] ?? ""}
      />
      <QTextInput
        className="w-24"
        inputProps={{min: 0, type: "number"}}
        onChange={(e, value) =>
          column.setFilterValue((old: [number, number]) => [old?.[0], value])
        }
        placeholder="Max"
        size="s"
        value={(columnFilterValue as [number, number])?.[1] ?? ""}
      />
    </div>
  ) : (
    <QTextInput
      className="w-36"
      onChange={(e, value) => column.setFilterValue(value)}
      placeholder="Search..."
      size="s"
      value={(columnFilterValue ?? "") as string}
    />
  )
}