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

import { InputGroup, InputGroupItem, TextInput, Select, SelectOption as Option, NumberInput, ComponentSize } from 'react-icecream'

export default function Demo() {
  return (
    <>
      <Line>
        <InputGroup>
          <Select defaultValue="https" style={{ flex: '0 0 100px' }}>
            <Option value="http">http://</Option>
            <Option value="https">https://</Option>
          </Select>
          <TextInput defaultValue="bar" />
          <InputGroupItem>.com</InputGroupItem>
        </InputGroup>
      </Line>
      <Line>
        <NameInput />
      </Line>
      <Line>
        <NameInput size="small" />
      </Line>
      <Line>
        <InputGroup style={{ width: '8em' }}>
          <NumberInput defaultValue={10} />
          <InputGroupItem>%</InputGroupItem>
        </InputGroup>
      </Line>
    </>
  )
}

const maxLastNameLen = 10

function NameInput({ size }: { size?: ComponentSize }) {
  const [firstName, setFirstName] = useState('foo')
  const [lastName, setLastName] = useState('foo')
  const error = lastName.length > maxLastNameLen
  return (
    <InputGroup validateStatus={error ? 'error' : 'success'} size={size}>
      <InputGroupItem>姓</InputGroupItem>
      <TextInput value={firstName} onChange={setFirstName} style={{ flex: '0 0 60px' }} />
      <InputGroupItem>名</InputGroupItem>
      <TextInput value={lastName} onChange={setLastName} suffix={`${lastName.length}/${maxLastNameLen}`} />
    </InputGroup>
  )
}

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