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

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

export default function Demo() {
  return (
    <>
      <Line>
        <AutoComplete
          placeholder="随便输入点什么"
          clearable
          fetch={fetchOptions}
        />
      </Line>
      <Line>
        <AutoComplete
          disabled
          defaultValue="I'm disabled"
          fetch={fetchOptions}
        />
      </Line>
      <Line>
        <AutoComplete
          size="small"
          defaultValue="I'm small"
          fetch={fetchOptions}
        />
      </Line>
      <Line>
        <NameInput />
      </Line>
      <Line>
        <AutoComplete
          placeholder="远程接口调用获取提示项"
          clearable
          fetch={fetchRemoteOptions}
        />
      </Line>
      <Line>
        <AutoComplete
          placeholder="带分组的提示项"
          clearable
          fetch={fetchGroupedOptions}
        />
      </Line>
    </>
  )
}

function NameInput() {
  const maxNameLength = 10
  const [name, setName] = useState('')
  const isNameValid = name.length <= maxNameLength

  const fetchNames = useCallback((keyword: string) => {
    const names = ['Alice', 'Bob', '张三', '李四']
    return names
      .filter(item => (keyword ? item.toLowerCase().includes(keyword.toLowerCase()) : true))
      .map(item => ({ value: item, content: item }))
  }, [])

  return (
    <AutoComplete
      placeholder="请输入名字"
      suffix={<span>{name.length}/{maxNameLength}</span>}
      value={name}
      onChange={setName}
      validateStatus={isNameValid ? 'success' : 'error'}
      clearable
      fetch={fetchNames}
    />
  )
}

function fetchOptions(keyword: string): SelectOptionItems<string> {
  if (!keyword) {
    return []
  }
  return [
    { value: keyword, content: keyword },
    { value: keyword.repeat(2), content: keyword.repeat(2) },
    { value: keyword.repeat(3), content: keyword.repeat(3) }
  ]
}

function fetchRemoteOptions(keyword: string): Promise<SelectOptionItems<string>> {
  if (!keyword) {
    return Promise.resolve([])
  }
  return new Promise(resolve => {
    setTimeout(() => resolve(fetchOptions(keyword)), 2000)
  })
}

function fetchGroupedOptions(keyword: string): SelectOptionItems<string> {
  if (!keyword) {
    return []
  }
  return [{
    title: 'Group 1',
    options: [
      { value: keyword.repeat(2), content: keyword.repeat(2) }
    ]
  }, {
    title: 'Group 2',
    options: [
      { value: keyword.repeat(3), content: keyword.repeat(3) }
    ]
  }]
}

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