import React, { PropsWithChildren } from 'react'

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

export default function Demo() {
  return (
    <>
      <Line>
        <TagsInput placeholder="随便输入点什么，按回车添加" />
      </Line>
      <Line>
        <TagsInput placeholder="I'm disabled" disabled />
      </Line>
      <Line>
        <TagsInput placeholder="I'm disabled" disabled defaultValue={['你干不掉我']} />
      </Line>
      <Line>
        <TagsInput placeholder="I'm small" size="small" />
      </Line>
      <Line>
        <TagsInput placeholder="支持清空操作" clearable />
      </Line>
      <Line>
        <TagsInput placeholder="可选择预置的标签" fetch={fetchOptions} />
      </Line>
      <Line>
        <style>{'.my-tag { max-width: 242px; }'}</style>
        <TagsInput
          placeholder="可自定义标签样式"
          tagClassName="my-tag"
          defaultValue={['我也不知道为什么会有这么长的标签[摊手]']}
        />
      </Line>
    </>
  )
}

function fetchOptions(keyword: string): SelectOptionItems<string> {
  const products = ['Kodo', 'CDN', 'Dora', 'QVM']

  return products
    .filter(item => (keyword ? item.toLowerCase().includes(keyword.toLowerCase()) : true))
    .map(item => ({ value: item, content: item }))
}

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