import React from 'react';

import { Form, FormRow, Label } from '../index';

import Validator from '../../validator/index';
import Button from '../../button/index';

const { Input } = Form;

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

    this.state = {
      disabled: true
    };

    this.onValid = this.onValid.bind(this);
    this.onInValid = this.onInValid.bind(this);

    this.checkers = {
      same: (val, callback) => {
        const password = this.password.getValue();
        callback({
          isValid: password === val,
          msg: '密码不一致'
        });
      }
    };
  }

  onValid() {
    this.setState({ disabled: false });
  }

  onInValid() {
    this.setState({ disabled: true });
  }

  render() {
    return (
      <Form>
        <Validator checkers={this.checkers} onValid={this.onValid} onInValid={this.onInValid}>
          <FormRow>
            <Label required>邮箱</Label>
            <Input
              name="email"
              data-required
              data-patterns={[{
                key: 'email',
                msg: '格式不正确'
              }]}
            />
          </FormRow>

          <FormRow>
            <Label required>密码</Label>
            <Input
              name="password"
              type="password"
              ref={(instance) => { this.password = instance; }}
              data-required
              data-patterns={[{
                key: 'limit',
                msg: '密码长度应在6-10位',
                limit: {
                  min: 6,
                  max: 10
                }
              }]}
            />
          </FormRow>

          <FormRow>
            <Label required>确认密码</Label>
            <Input
              name="c-password"
              type="password"
              data-required
              data-patterns={[{
                key: 'limit',
                msg: '密码长度应在6-10位',
                limit: {
                  min: 6,
                  max: 10
                }
              }, {
                key: 'same'
              }]}
            />
          </FormRow>

          <FormRow>
            <Label>个性签名</Label>
            <Input
              name="sign"
              type="textarea"
              data-patterns={[{
                key: 'limit',
                msg: '100个字以内',
                min: 1,
                max: 100
              }]}
            />
          </FormRow>
        </Validator>

        <Button
          type="button"
          style={{ marginLeft: 120 }}
          disabled={this.state.disabled}
        >
          注册
        </Button>
      </Form>
    );
  }
}