import React, { useState } from 'react'
import { DataTable, DataTableColumnOptions } from 'react-icecream'

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

const columnIdx: DataTableColumnOptions<Record, 'id'> = {
  title: 'ID',
  width: '80px',
  accessor: 'id'
}
const columnName: DataTableColumnOptions<Record, 'name'> = {
  title: '空间名称',
  accessor: 'name'
}
const columnType: DataTableColumnOptions<Record, 'type'> = {
  title: '空间类型',
  accessor: 'type'
}
const columnRegion: DataTableColumnOptions<Record, 'region'> = {
  title: '存储区域',
  accessor: 'region'
}
const columnAccess: DataTableColumnOptions<Record, 'access'> = {
  title: '空间类型',
  accessor: 'access'
}

function disableSelectionWhen(record: Record) {
  return record.access === '公开'
}

export default function Demo() {
  const [selectedIds, setSelectedIds] = useState<string[]>(['2'])
  function handleSelect(nextSelectedIds: string[]) {
    setSelectedIds(nextSelectedIds)
    console.log(nextSelectedIds)
  }
  return (
    <DataTable<Record>
      columns={[columnIdx, columnName, columnType, columnRegion, columnAccess]}
      records={allRecords.slice(0, 8)}
      recordIdAccessor="id"
      selection={{ type: 'single', selectedIds, onChange: handleSelect, disableWhen: disableSelectionWhen }}
    />
  )
}