Row Dnd

import {useEffect, useState} from "react"

import {QButton, QProgressCircle} from "@qui/react"
import {
  ColumnDef,
  getCoreRowModel,
  QTable,
  QTbody,
  QTh,
  QThead,
  QTr,
  RenderHeader,
  useReactTable,
} from "@qui/react-table"

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

import {DraggableRow} from "./draggable-row"

const defaultColumns: ColumnDef<Person>[] = [
  {
    columns: [
      {
        accessorKey: "firstName",
        cell: (info) => info.getValue(),
        header: "First Name",
      },
      {
        accessorKey: "lastName",
        cell: (info) => info.getValue(),
        header: "Last Name",
      },
    ],
    header: "Name",
  },
  {
    columns: [
      {
        accessorKey: "age",
        header: "Age",
      },
      {
        accessorKey: "visits",
        header: "Visits",
      },
      {
        accessorKey: "status",
        header: "Status",
      },
      {
        accessorKey: "progress",
        header: "Profile Progress",
      },
    ],
    header: "Info",
  },
]

export default function RowDnd() {
  const {data = [], isFetching, refetch} = usePersonData(20)

  const [mutableData, setMutableData] = useState<Person[]>(data)

  useEffect(() => {
    setMutableData(data)
  }, [data])

  const reorderRow = (draggedRowIndex: number, targetRowIndex: number) => {
    mutableData.splice(
      targetRowIndex,
      0,
      data.splice(draggedRowIndex, 1)[0] as Person,
    )
    setMutableData([...data])
  }

  const regenerateData = () => refetch()

  const table = useReactTable({
    columns: defaultColumns,
    data: mutableData,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.userId,
  })

  return (
    <div className="p-2">
      <div className="flex items-center gap-2">
        <QButton onClick={regenerateData} variant="outline">
          Regenerate
        </QButton>
        {isFetching ? <QProgressCircle size="xs" /> : null}
      </div>

      <QTable className="mt-4">
        <QThead>
          {table.getHeaderGroups().map((headerGroup) => (
            <QTr key={headerGroup.id}>
              <QTh />
              {headerGroup.headers.map((header) => (
                <QTh
                  key={header.id}
                  colSpan={header.colSpan}
                  style={{width: header.getSize()}}
                >
                  <RenderHeader header={header} />
                </QTh>
              ))}
            </QTr>
          ))}
        </QThead>
        <QTbody>
          {table.getRowModel().rows.map((row) => (
            <DraggableRow key={row.id} reorderRow={reorderRow} row={row} />
          ))}
        </QTbody>
      </QTable>
    </div>
  )
}