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

import { TextInput } from 'react-icecream'
import { SearchThinIcon } from 'react-icecream/icons'

export default function Demo() {
  return (
    <>
      <Line>
        <TextInput
          placeholder="随便输入点什么"
          defaultValue="hello" />
      </Line>
      <Line>
        <TextInput disabled defaultValue="I'm disabled" />
      </Line>
      <Line>
        <NameInput />
      </Line>
      <Line>
        <UrlInput />
      </Line>
      <Line>
        <SearchInput />
      </Line>
    </>
  )
}

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

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

function UrlInput() {
  const [url, setUrl] = useState('www.qiniu.com')
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <TextInput
      clearable
      size="large"
      prefix="https://"
      placeholder="请输入 URL"
      value={url}
      onChange={setUrl}
      inputRef={inputRef}
    />
  )
}

function SearchInput() {
  return (
    <TextInput
      clearable
      suffix={<SearchThinIcon />}
      placeholder="输入关键词进行搜索"
    />
  )
}

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