import React, { PropsWithChildren, useState } from 'react'

import { Button, MultiSelect, SelectOptionItems } from 'react-icecream'

export default function Demo() {
  const [disabled, setDisabled] = useState(false)
  const [value, setValue] = useState<string[]>(['ab', 'abc'])

  return (
    <>
      <Line>
        <Button type="primary" onClick={() => setDisabled(d => !d)}>
          {disabled ? '启用' : '禁用'}
        </Button>
      </Line>
      <Line>
        <MultiSelect
          disabled={disabled}
          searchable
          collapsed={false}
          value={value}
          onChange={setValue}
          fetch={fetchOptions}
          placeholder="请选择"
        />
      </Line>
    </>
  )
}

const options = ['a', 'ab', 'abc', 'foo']

async function fetchOptions(keyword: string): Promise<SelectOptionItems<string>> {
  const result = options.filter(option => option.includes(keyword))
  await timeout(300)
  return result.map(value => ({
    value,
    content: value
  }))
}

function timeout(delay: number) {
  return new Promise(resolve => setTimeout(resolve, delay))
}

function Line({ children }: PropsWithChildren<{}>) {
  return <div style={{ marginBottom: '1em' }}>{children}</div>
}