import React, { useState } from 'react'

import { Button, Modal, Table } from 'react-icecream'

import { TableColumn } from '../../Table'

export type Record = {
  id: string
  name: string
  type: string
  region: string
  access: string
  createAt: string
}

const records: Record[] = [
  {
    id: '1',
    name: 'fusion-qiniucdn-test',
    type: '自有空间',
    region: '华东22',
    access: '公开',
    createAt: '2020.01.01'
  },
  {
    id: '2',
    name: 'fusion-foo',
    type: '私有空间',
    region: '华南',
    access: '私有',
    createAt: '2020.03.18'
  },
  {
    id: '3',
    name: 'fusion-bar',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2019.12.23'
  },
  {
    id: '4',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2021.07.01'
  },
  {
    id: '5',
    name: 'fusion-qiniucdn-test',
    type: '自有空间',
    region: '华东',
    access: '公开',
    createAt: '2011.11.24'
  },
  {
    id: '6',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华南',
    access: '私有',
    createAt: '2008.08.08'
  },
  {
    id: '7',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2013.03.17'
  },
  {
    id: '8',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2017.11.22'
  },
  {
    id: '9',
    name: 'fusion-qiniucdn-test',
    type: '自有空间',
    region: '华东',
    access: '公开',
    createAt: '2020.08.25'
  },
  {
    id: '10',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华南',
    access: '私有',
    createAt: '2003.05.06'
  },
  {
    id: '11',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2018.01.02'
  },
  {
    id: '12',
    name: 'fusion-qiniucdn',
    type: '私有空间',
    region: '华北',
    access: '私有',
    createAt: '2019.06.07'
  }
]

export default function Demo() {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <Modal
        visible={visible}
        title="展示 Table"
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <Table fixHead records={records} style={{ height: '400px' }}>
          <TableColumn<Record> title="空间名称" accessor="name" />
          <TableColumn<Record> title="空间类型" accessor="type" />
          <TableColumn<Record> title="空间区域" accessor="region" />
        </Table>
      </Modal>
    </>
  )
}