import React, { useState } from 'react'

import { Select, SelectOption, Modal, Table, TableColumn } from 'react-icecream'

import records from '../../Table/demos/shared-records'

export default function Demo() {
  const [value, setValue] = useState<string | null>(null)
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const [visible, setVisible] = useState(false)

  const handleSelect = (nextSelectedIds: string[]) => {
    setSelectedIds(nextSelectedIds)
  }

  const handleConfirm = () => {
    setValue(selectedIds[0])
    setVisible(false)
  }

  return (
    <>
      <Select
        rootHtmlProps={{
          onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
            setVisible(true)
            e.preventDefault()
          }
        }}
        value={value}
      >
        {records.map(item => <SelectOption key={item.id} value={item.id}>{item.name}</SelectOption>)}
      </Select>
      <Modal title="请选择服务" visible={visible} onOk={handleConfirm} onCancel={() => setVisible(false)}>
        <Table recordIdAccessor="id" records={records} selection={{ type: 'single', selectedIds, onChange: handleSelect }}>
          <TableColumn title="ID" accessor="id" />
          <TableColumn title="创建时间" accessor="createAt" />
          <TableColumn title="名称" accessor="name" />
        </Table>
      </Modal>
    </>
  )
}