import React from 'react';

import Validator from '../index';
import Button from '../../button/index';
import { Form, FormRow, Label } from '../../form/index';

const { Input, Datepicker, Radio, RadioGroup } = Form;
// import Input from '../../input/index';
// import Datepicker from '../../datepicker/index';
// import { Radio, RadioGroup } from '../../radio/index';

export default class demoMsg extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      canSubmit: false
    };

    this.enableBtn = this.enableBtn.bind(this);
    this.disableBtn = this.disableBtn.bind(this);
    this.getFormValid = this.getFormValid.bind(this);
  }

  enableBtn() {
    this.setState({
      canSubmit: true
    });
  }

  disableBtn() {
    this.setState({
      canSubmit: false
    });
  }

  getFormValid() {
    alert(this.refs.validator.isAllValid());
  }

  render() {
    return (
      <Validator ref="validator" onValid={this.enableBtn} onInValid={this.disableBtn}>
        <Form>
          <FormRow>
            <Label required>手机号</Label>
            <Input
              name="field1"
              placeholder="请填写您的手机号"
              data-required
              data-patterns={[{
                key: 'mobile',
                msg: '格式不正确'
              }]}
            />
          </FormRow>
          <FormRow>
            <Label>邮箱</Label>
            <Input
              name="field2"
              placeholder="请填写您的邮箱"
              data-patterns={[{
                key: 'email',
                msg: '格式不正确'
              }]}
            />
          </FormRow>
          <FormRow>
            <Label>生日</Label>
            <Datepicker
              name="field3"
              data-patterns={[]}
            />
          </FormRow>
          <FormRow>
            <Label required>性别</Label>
            <RadioGroup
              name="field4"
              data-required
              data-patterns={[]}
            >
              <Radio value="0">男</Radio>
              <Radio value="1">女</Radio>
            </RadioGroup>
          </FormRow>
          <Button type="button" disabled={!this.state.canSubmit}>提交</Button>
          <Button type="button" onClick={this.getFormValid}>isAllValid()</Button>
        </Form>
      </Validator>
    );
  }
}