import React, { useState } from 'react'

import {
  DrawerForm, FormItem, RadioGroup, Radio, Button,
  FormFooter, FormLayout, FormLayoutType, TextInput
} from 'react-icecream'

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

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 [submitText, setSubmitText] = useState('确认')

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

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <DrawerForm
        title="示例"
        visible={visible}
        layout={layout}
        labelWidth="4em"
        onSubmit={handleSubmit}
        onCancel={handleCancel}
        footer={
          <FormFooter
            submitText={submitText}
            submitButtonProps={{ danger: true }}
          />
        }
      >
        <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="按钮文本">
          <TextInput value={submitText} onChange={setSubmitText} />
        </FormItem>
      </DrawerForm>
    </>
  )
}