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

import { Form, FormItem, TextInput, FormLayout, FormLayoutType, RadioGroup, Radio } from 'react-icecream'

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

export default function Demo() {
  const [layoutType, setLayoutType] = useState<FormLayoutType>(layouts[0].type!)
  const layout = layouts.find(item => item.type === layoutType)

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

  return (
    <Form layout={layout} labelWidth="4em" onSubmit={handleSubmit}>
      <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="订单状态" labelVerticalAlign="text">
        <RadioGroup defaultValue="pending">
          <Radio value="pending">待处理</Radio>
          <Radio value="processing">处理中</Radio>
          <Radio value="finished">已完成</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="订单号" validateStatus="error" validateMessage="这里是错误信息" required>
        <TextInput placeholder="请输入订单号" />
      </FormItem>
    </Form>
  )
}