import { Title } from '@tidbcloud/uikit'
import {
  MRT_ColumnDef,
  ProTable,
  useProTable,
  renderExpandCell
} from '@tidbcloud/uikit/biz'

export const TableExample = () => {
  const data = [
    {
      position: 6,
      mass: 12.011,
      symbol: 'C',
      name: 'Carbon',
      subRows: [
        {
          id: 2,
          name: 'Jane Doe',
          position: 6,
          mass: 12.011,
          symbol: 'C'
        }
      ]
    },
    { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
    { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
    { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
    { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
    { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
    { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
    { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
    { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
    { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
    { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
    { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
    { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
    { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
    { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }
  ]

  const columns: MRT_ColumnDef<{
    position: number
    mass: number
    symbol: string
    name: string
  }>[] = [
    {
      header: 'Position',
      accessorKey: 'position',
      Cell: renderExpandCell,
      footer: 'Position',
      enableResizing: true
    },
    {
      header: 'Name',
      accessorKey: 'name',
      footer: 'Position'
    },
    {
      header: 'Symbol',
      accessorKey: 'symbol',
      footer: 'Symbol'
    },
    {
      header: 'Mass',
      accessorKey: 'mass',
      mantineTableHeadCellProps: {
        align: 'right'
      },
      mantineTableBodyCellProps: {
        align: 'right'
      },
      mantineTableFooterCellProps: {
        align: 'right'
      },
      footer: 'Mass'
    }
  ]
  const table = useProTable({
    columns,
    data
  })

  return (
    <div>
      <Title mb={'md'}>Protable Example</Title>
      <ProTable table={table} />
    </div>
  )
}