import React, { useState } from 'react'
import { Table, TableType, Button, TextInput } from 'react-icecream'

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

const RecordTable: TableType<Record> = Table

const records = originalRecords.slice(0, 2)

export default function Demo() {
  // 在 idVisible 发生变化时，表格会从 3 列变为 4 列（或反之）
  const [idVisible, setIdVisible] = useState(false)
  return (
    <>
      <div style={{ marginBottom: '12px' }}>
        <Button type="primary" onClick={() => setIdVisible(v => !v)}>
          {`${idVisible ? '隐藏' : '展示'} ID 信息`}
        </Button>
      </div>
      <RecordTable records={records}>
        {idVisible && <RecordTable.Column id="id" title="ID" accessor="id" />}
        <RecordTable.Column id="name" title="名称" accessor="name" render={name => <TextInput defaultValue={name} />} />
        <RecordTable.Column id="type" title="类型" accessor="type" />
        <RecordTable.Column id="region" title="区域" accessor="region" />
      </RecordTable>
    </>
  )
}