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

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

export default function Demo() {
  const [filterValue, setFilterValue] = useState<TableColumnSelectFilterValue[]>(['自有空间'])
  const [records, setRecords] = useState(originalRecords)

  useEffect(() => {
    if (filterValue.length === 0) {
      setRecords(originalRecords)
      return
    }
    setRecords(originalRecords.filter(record => filterValue.indexOf(record.type) > -1))
  }, [filterValue])

  return (
    <div>
      <span>当前的 filterValue: {filterValue.join(',')}</span>
      <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: 'multi-select',
            value: filterValue,
            optionItems: [
              {
                text: '公开空间',
                value: '公开空间'
              },
              {
                text: '自有空间',
                value: '自有空间'
              },
              {
                text: '私有空间',
                value: '私有空间'
              }
            ],
            onChange: setFilterValue
          }}
        />
      </Table>
    </div>
  )
}