"use client"

import type { ReactNode } from "react"
import type { Table } from "@tanstack/react-table"
import {
  DataGrid,
  DataGridContainer,
  DataGridPagination,
  DataGridTable,
  type DataGridProps,
} from "@/components/reui/data-grid"
import {
  DATA_GRID_CONTAINER_CLASS,
  DEFAULT_DATA_GRID_CLASS_NAMES,
  DEFAULT_DATA_GRID_LAYOUT,
} from "@/components/data-grids/shared/data-grid-layout"

interface DataGridShellProps<TData extends object> {
  table: Table<TData>
  recordCount: number
  children?: ReactNode
  pagination?: boolean
  isLoading?: boolean
  loadingMode?: DataGridProps<TData>["loadingMode"]
  emptyMessage?: ReactNode
  onRowClick?: DataGridProps<TData>["onRowClick"]
  tableLayout?: DataGridProps<TData>["tableLayout"]
  tableClassNames?: DataGridProps<TData>["tableClassNames"]
}

function DataGridShell<TData extends object>({
  table,
  recordCount,
  children,
  pagination = false,
  isLoading,
  loadingMode,
  emptyMessage,
  onRowClick,
  tableLayout = DEFAULT_DATA_GRID_LAYOUT,
  tableClassNames = DEFAULT_DATA_GRID_CLASS_NAMES,
}: DataGridShellProps<TData>) {
  return (
    <DataGrid
      className="w-full"
      table={table}
      recordCount={recordCount}
      isLoading={isLoading}
      loadingMode={loadingMode}
      emptyMessage={emptyMessage}
      onRowClick={onRowClick}
      tableLayout={tableLayout}
      tableClassNames={tableClassNames}
    >
      {children ?? (
        <>
          <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
            <DataGridTable />
          </DataGridContainer>
          {pagination && recordCount > 0 && (
            <DataGridPagination className="px-5 pb-3" />
          )}
        </>
      )}
    </DataGrid>
  )
}

export { DataGridShell, type DataGridShellProps }