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 [loading, setLoading] = useState(false)
  const [filterValue, setFilterValue] = useState<TableColumnSelectFilterValue[]>([])

  useEffect(() => {
    const request = new Promise(resolve => setTimeout(() => {
      if (filterValue.length === 0) {
        resolve(originalRecords)
        return
      }
      resolve(originalRecords.filter(record => filterValue.indexOf(record.type) > -1))
    }, 1000))

    setLoading(true)
    request.then(filteredRecords => {
      setLoading(false)
      setRecords(filteredRecords as Record[])
    })
  }, [filterValue])

  return (
    <Table<Record> records={records} loading={loading}>
      <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>
  )
}