import React, { useEffect, useState } from 'react'
import { Form, Modal, Button, Input, InputNumber, Select, Radio } from 'antd'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 6,
    },
  },
}

export default Form.create()(props => {
  const [evtType, setEvtType] = useState('festival')

  const handleSubmit = e => {
    e.preventDefault()
    props.form.validateFields((err, values) => {
      if (!err) {
        props.onSubmit({
          ...(props.dataSource || {}),
          ...values,
          evtType,
        })
      }
    })
  }

  useEffect(() => {
    if (props.visible) {
      const data = props.dataSource || {}
      props.form.setFieldsValue(data)
      // setEvtType(data.evtType)
    }
  }, [props.dataSource, props.visible])

  return (
    <Modal  footer={null} maskClosable={false} onCancel={props.onCancel} visible={props.visible}>
      <Form onSubmit={handleSubmit} {...formItemLayout}>
        <Form.Item label="类型">节日
          {/* {
            props.form.getFieldDecorator('evtType', {
              rules: [{required: true, message: '请选择类型'}]
            })(
              <Select onChange={v => setEvtType(v)}>
                <Select.Option value="festival">节日</Select.Option>
                <Select.Option value="birthday">生日</Select.Option>
              </Select>
            )
          } */}
        </Form.Item>
        <Form.Item label="名称">
          {
            props.form.getFieldDecorator('name', {
              rules: [{required: true, message: '请填写名称'}]
            })(<Input placeholder="请填写名称, 中秋节请填写中秋" />)
          }
        </Form.Item>
        {
          evtType === 'festival' &&
          <Form.Item label="发生日" help="格式示例: 06-01">
            {
              props.form.getFieldDecorator('evtDate', {
                rules: [{required: true, message: '请填写发生日期'}]
              })(<Input placeholder="格式示例: 08-15" />)
            }
          </Form.Item>
        }
        {
          evtType === 'festival' &&
          <Form.Item label="是否阳历">
            {
              props.form.getFieldDecorator('isSolar', {
                rules: [{required: true, message: '请选择阴阳历'}]
              })(
                <Radio.Group>
                  <Radio value={true}>阳历</Radio>
                  <Radio value={false}>阴历</Radio>
                </Radio.Group>
              )
            }
          </Form.Item>
        }
        <Form.Item label="祝福语" help="示例: 祝您中秋节快乐">
          {
            props.form.getFieldDecorator('wishes', {
              rules: [{required: true, message: '请填写祝福语'}]
            })(<Input placeholder="建议4-12个字" />)
          }
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button onClick={props.onCancel} style={{ marginLeft: '48px' }}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  )
})
