import React, { useState } from 'react'
import { Table, TableColumnOptions } from 'react-icecream'

import originalRecords, { Record } from './shared-records'

const columnIdx: TableColumnOptions<Record, void> = {
  title: '索引',
  width: '40px',
  render: (_, __, idx) => idx + 1
}
const columnName: TableColumnOptions<Record, 'name'> = {
  title: '空间名称',
  accessor: 'name'
}
const columnType: TableColumnOptions<Record, 'type'> = {
  title: '空间类型',
  accessor: 'type'
}
const columnRegion: TableColumnOptions<Record, 'region'> = {
  title: '存储区域',
  accessor: 'region'
}
const columnAccess: TableColumnOptions<Record, 'access'> = {
  title: '空间类型',
  accessor: 'access'
}

export default function Demo() {
  const [selectedIds, setSelectedIds] = useState<string[]>(['1'])
  function handleSelect(nextSelectedIds: string[]) {
    setSelectedIds(nextSelectedIds)
    console.log(nextSelectedIds)
  }
  return (
    <Table<Record>
      columns={[columnIdx, columnName, columnType, columnRegion, columnAccess]}
      records={originalRecords}
      recordIdAccessor="id"
      selection={{ type: 'single', selectedIds, onChange: handleSelect }}
    />
  )
}