/* eslint-disable no-alert */
import React, { useState } from 'react'

import {
  Form, FormItem, TextInput, Select, SelectOption as Option,
  Radio, RadioGroup, Checkbox, CheckboxGroup, NumberInput, InputGroup, InputGroupItem,
  TextArea, Link, ComponentSize, Switch
} from 'react-icecream'

const sizes: ComponentSize[] = ['small', 'default', 'large']

export default function Demo() {
  const [size, setSize] = useState<ComponentSize>('default')

  function handleSubmit() {
    alert('submit')
  }

  function handleCancel() {
    alert('cancel')
  }

  return (
    <Form
      size={size}
      layout="horizontal"
      labelWidth="4em"
      style={{ width: '500px' }}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
    >
      <FormItem label="表单尺寸">
        <RadioGroup radioType="button" value={size} onChange={setSize}>
          {sizes.map(s => (
            <Radio size={size} key={s} value={s}>{s}</Radio>
          ))}
        </RadioGroup>
      </FormItem>
      <FormItem label="用户名" labelVerticalAlign="text">
        <p style={{ margin: '0 0 12px 0' }}>用户名是用户的唯一标识</p>
        <TextInput placeholder="请输入用户名" />
      </FormItem>
      <FormItem label="订单号">
        <TextInput placeholder="请输入订单号" />
      </FormItem>
      <FormItem label="订单状态">
        <Select placeholder="请选择状态">
          <Option value="pending">待处理</Option>
          <Option value="processing">处理中</Option>
          <Option value="finished">已完成</Option>
        </Select>
      </FormItem>
      <FormItem label="商品数量">
        <NumberInput min={1} defaultValue={2} />
      </FormItem>
      <FormItem label="是否开启" labelVerticalAlign="text">
        <Switch />
      </FormItem>
      <FormItem label="订单类型" labelVerticalAlign="text" validateStatus="error" validateMessage="请选择订单类型">
        <RadioGroup defaultValue="pre-paid">
          <Radio value="pre-paid">预付费</Radio>
          <Radio value="post-paid">后付费</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="付费渠道" labelVerticalAlign="text">
        <CheckboxGroup defaultValue={['wepay']}>
          <Checkbox value="bank">银行卡</Checkbox>
          <Checkbox value="alipay">支付宝</Checkbox>
          <Checkbox value="wepay">微信支付</Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem
        label="回调地址"
        validateStatus="error"
        validateMessage="回调地址不正确"
        tip={<span>回调请求格式见<Link href="#">文档</Link></span>}
      >
        <InputGroup>
          <Select defaultValue="https" style={{ flex: '0 0 84px' }}>
            <Option value="http">http</Option>
            <Option value="https">https</Option>
          </Select>
          <InputGroupItem>://</InputGroupItem>
          <TextInput defaultValue="qiniu" />
          <InputGroupItem>.com</InputGroupItem>
        </InputGroup>
      </FormItem>
      <FormItem label="备注">
        <TextArea placeholder="请输入订单备注" />
      </FormItem>
    </Form>
  )
}