import React, { useState } from 'react'

import { Form, FormItem, TextInput, FormFooter, RadioGroup, Radio, Switch } from 'react-icecream'

export default function Demo() {
  const [footerAlign, setFooterAlign] = useState<'left' | 'right'>('left')
  const [submitText, setSubmitText] = useState('确认提交')
  const [cancellable, setCancellable] = useState(false)

  const footer = (
    <FormFooter
      align={footerAlign}
      submitText={submitText}
    />
  )

  const handleSubmit = () => alert('submit')
  const handleCancel = cancellable ? (() => alert('cancel')) : undefined

  return (
    <Form
      style={{ width: '400px' }}
      layout="horizontal"
      labelWidth="4em"
      footer={footer}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
    >
      <FormItem label="对齐方向" labelVerticalAlign="text">
        <RadioGroup value={footerAlign} onChange={setFooterAlign}>
          <Radio value="left">左对齐</Radio>
          <Radio value="right">右对齐</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="提交文本">
        <TextInput style={{ width: '100%' }} value={submitText} onChange={setSubmitText} />
      </FormItem>
      <FormItem label="可取消" labelVerticalAlign="text">
        <Switch checked={cancellable} onChange={setCancellable} />
      </FormItem>
    </Form>
  )
}