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

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

export default function Demo() {
  const [records, setRecords] = useState(originalRecords)
  const [filterValue, setFilterValue] = useState<TableColumnSelectFilterValue | null>(null)

  useEffect(() => {
    if (filterValue == null) {
      setRecords(originalRecords)
      return
    }
    setRecords(originalRecords.filter(record => filterValue === record.type))
  }, [filterValue])

  return (
    <Table<Record> records={records}>
      <Table.Column
        id="idx"
        title="索引"
        width="40px"
        render={(_, __, idx) => idx + 1}
      />
      <Table.Column
        title="空间名称"
        accessor="name"
      />
      <Table.Column
        title="空间类型"
        accessor="type"
        width="40%"
        filter={{
          type: 'select',
          value: filterValue,
          optionItems: [
            {
              text: '公开空间',
              value: '公开空间'
            },
            {
              text: '自有空间',
              value: '自有空间'
            },
            {
              text: '私有空间',
              value: '私有空间'
            }
          ],
          onChange: setFilterValue
        }}
      />
    </Table>
  )
}