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

import { Button, InputGroup, InputGroupItem, NumberInput } from 'react-icecream'

/* eslint-disable no-console */

export default function Demo() {
  return (
    <>
      <Line>
        <ControlledInput />
      </Line>
      <Line>
        非受控：<NumberInput defaultValue={100} onChange={logChange} />
      </Line>
      <Line>
        限制最小值：
        <InputGroup style={{ width: '10em' }}>
          <InputGroupItem>1 &lt;=</InputGroupItem>
          <NumberInput min={1} onChange={logChange} />
        </InputGroup>
      </Line>
      <Line>
        限制最大值：
        <InputGroup style={{ width: '10em' }}>
          <NumberInput max={10} onChange={logChange} />
          <InputGroupItem>&lt;= 10</InputGroupItem>
        </InputGroup>
      </Line>
      <Line>
        限制范围：
        <InputGroup style={{ width: '14em' }}>
          <InputGroupItem>1 &lt;=</InputGroupItem>
          <NumberInput min={1} max={10} step={2} onChange={logChange} />
          <InputGroupItem>&lt;= 10</InputGroupItem>
        </InputGroup>
      </Line>
      <Line>
        百分比：
        <InputGroup style={{ width: '8em' }}>
          <NumberInput defaultValue={10} />
          <InputGroupItem>%</InputGroupItem>
        </InputGroup>
      </Line>
      <Line>
        一位小数：<NumberInput min={1} max={2} defaultValue={1} digits={1} />
      </Line>
      <Line>
        保留两位小数，step 为 0.1：
        <NumberInput defaultValue={1} digits={2} step={0.1} onChange={console.log} />
      </Line>
      <Line>
        保留两位小数，初始值为 1.248，保留完整的初始值：
        <NumberInput defaultValue={1.248} digits={2} onChange={console.log} />
      </Line>
      <Line>
        清空时值置为 0：<NumberInput defaultValue={10} emptyValue={0} />
      </Line>
      <Line>
        禁用：<NumberInput defaultValue={10} disabled />
      </Line>
    </>
  )
}

function ControlledInput() {
  const [num, setNum] = useState<number | null>(0)

  useEffect(() => console.log('num:', num), [num])

  return (
    <>
      受控：
      <NumberInput value={num} onChange={setNum} />
      <Button
        type="primary"
        style={{ marginLeft: '1em' }}
        onClick={() => setNum(null)}
      >Reset</Button>
    </>
  )
}

function logChange(v: number | null) {
  console.log('onChange:', v)
}

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