EvoBGP/apps/web/src/components/data-grid-shell.tsx

import type { ReactNode } from 'react'
import type { Table } from '@tanstack/react-table'

import { cn } from '@evobgp/ui/lib/utils'

import { DataGridToolbar } from '@/components/data-grid-toolbar'
import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName, panelCardInsetClassName } from '@/components/panel-card'
import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
import {
  DATA_GRID_MESSAGES_RU,
  DATA_GRID_PAGINATION_RU,
  DATA_GRID_TABLE_CLASS_NAMES,
  DATA_GRID_TABLE_LAYOUT,
} from '@/lib/data-grid-defaults'

interface DataGridShellProps<TData extends object> {
  table: Table<TData>
  recordCount: number
  isLoading?: boolean
  emptyMessage?: ReactNode
  showPagination?: boolean
  tableLayout?: typeof DATA_GRID_TABLE_LAYOUT
  className?: string
  onRowClick?: (row: TData) => void
}

export function DataGridShell<TData extends object>({
  table,
  recordCount,
  isLoading = false,
  emptyMessage,
  showPagination = true,
  tableLayout = DATA_GRID_TABLE_LAYOUT,
  className,
  onRowClick,
}: DataGridShellProps<TData>) {
  return (
    <DataGrid
      table={table}
      recordCount={recordCount}
      isLoading={isLoading}
      emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
      tableLayout={tableLayout}
      tableClassNames={DATA_GRID_TABLE_CLASS_NAMES}
      className={className}
      onRowClick={onRowClick}
    >
      <DataGridContainer border={false}>
        <DataGridTable />
      </DataGridContainer>
      {showPagination ? (
        <div className={cn(panelCardFooterClassName, panelCardInsetClassName)}>
          <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
        </div>
      ) : null}
    </DataGrid>
  )
}

interface DataGridCardProps {
  title?: string
  description?: string
  actions?: ReactNode
  children: ReactNode
  className?: string
}

export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
  return (
    <PanelCard
      title={title}
      description={description}
      actions={actions}
      className={className}
      contentClassName={panelCardContentFlushClassName}
    >
      {children}
    </PanelCard>
  )
}

interface DataGridSectionProps<TData extends object> extends DataGridShellProps<TData> {
  searchValue: string
  onSearchChange: (value: string) => void
  searchPlaceholder?: string
  toolbarFilters?: ReactNode
  toolbarActions?: ReactNode
  beforeGrid?: ReactNode
}

export function DataGridSection<TData extends object>({
  searchValue,
  onSearchChange,
  searchPlaceholder,
  toolbarFilters,
  toolbarActions,
  beforeGrid,
  ...shellProps
}: DataGridSectionProps<TData>) {
  return (
    <>
      <DataGridToolbar
        searchValue={searchValue}
        onSearchChange={onSearchChange}
        searchPlaceholder={searchPlaceholder}
        filters={toolbarFilters}
        actions={toolbarActions}
      />
      {beforeGrid}
      <DataGridShell {...shellProps} />
    </>
  )
}