import React, { useState } from 'react'

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

const layouts: FormLayout[] = [
  { type: 'horizontal' },
  { type: 'vertical' }
]

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

export default function Demo() {
  const [visible, setVisible] = useState(false)
  const [layoutType, setLayoutType] = useState<FormLayoutType>(layouts[0].type!)
  const layout = layouts.find(item => item.type === layoutType)
  const [size, setSize] = useState<ComponentSize>('default')

  function handleSubmit() {
    alert('submit')
    setVisible(false)
  }
  function handleCancel() {
    alert('cancel')
    setVisible(false)
  }

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <ModalForm
        title="示例"
        visible={visible}
        layout={layout}
        size={size}
        labelWidth="4em"
        onSubmit={handleSubmit}
        onCancel={handleCancel}
        maskClickable
      >
        <div style={{ maxHeight: 'calc(100vh - 400px)', overflowY: 'auto' }}>
          <FormItem label="表单布局">
            <RadioGroup radioType="button" value={layoutType} onChange={setLayoutType}>
              {layouts.map(l => (
                <Radio key={l.type} value={l.type}>{l.type}</Radio>
              ))}
            </RadioGroup>
          </FormItem>
          <FormItem label="表单尺寸">
            <RadioGroup radioType="button" value={size} onChange={setSize}>
              {sizes.map(s => (
                <Radio 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>
        </div>
      </ModalForm>
    </>
  )
}