import React, { useState } from 'react'

import {
  ModalForm, FormItem, RadioGroup, Radio, Button,
  FormFooter, FormFooterAlign, TextInput
} from 'react-icecream'

const footerAligns: FormFooterAlign[] = ['left', 'right']

export default function Demo() {
  const [visible, setVisible] = useState(false)
  const [footerAlign, setFooterAlign] = useState<FormFooterAlign>('right')
  const [submitText, setSubmitText] = useState('确认')

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

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <ModalForm
        title="示例"
        visible={visible}
        layout="horizontal"
        labelWidth="4em"
        onSubmit={handleSubmit}
        onCancel={handleCancel}
        maskClickable
        footer={
          <FormFooter
            submitText={submitText}
            submitButtonProps={{ danger: true }}
            align={footerAlign}
          />
        }
      >
        <FormItem label="底部布局" labelVerticalAlign="text">
          <RadioGroup value={footerAlign} onChange={setFooterAlign}>
            {footerAligns.map(l => (
              <Radio key={l} value={l}>{l}</Radio>
            ))}
          </RadioGroup>
        </FormItem>
        <FormItem label="按钮文本">
          <TextInput value={submitText} onChange={setSubmitText} />
        </FormItem>
      </ModalForm>
    </>
  )
}