import React, { useState } from 'react'

import { Select, SelectOptionItems } from 'react-icecream'

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

  return (
    <Select
      searchable
      value={value}
      onChange={setValue}
      fetch={fetchOptions}
      placeholder="请选择"
    />
  )
}

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))
}