import React from 'react'
import { DataTable, DataTableType } from 'react-icecream'

enum BucketType {
  Private = 'private',
  Public = 'public'
}

type Bucket = {
  name: string
  type: BucketType
}

// 在这里通过将 Table 赋值给 BucketTable 对所需的泛型进行声明（Bucket）
// 这样后续在使用 BucketTable 时 TS 会结合 Bucket 类型进行检查
const BucketTable: DataTableType<Bucket> = DataTable

const records: Bucket[] = [
  { name: 'fusion-qiniucdn-1', type: BucketType.Public },
  { name: 'fusion-qiniucdn-2', type: BucketType.Private }
]

export default function Demo() {
  return (
    <BucketTable records={records}>
      <BucketTable.Column
        id="idx"
        title="索引"
        width="80px"
        render={(_, __, idx) => idx + 1}
      />
      <BucketTable.Column
        title="空间名称"
        accessor="name"
      />
      <BucketTable.Column
        title="空间类型"
        accessor="type"
        render={type => humanizeBucketType(type)}
      />
    </BucketTable>
  )
}

function humanizeBucketType(type: BucketType) {
  return type === BucketType.Public ? '公开空间' : '私有空间'
}