import React from "react";
import {Button, Form, Input, Select} from "antd";
const {Option, OptGroup} = Select;
const FormItem = Form.Item;

class ComponentName extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      pass_min_length: 4
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {
  }

  submit(e) {
    if (e) {
      e.preventDefault();
    }
    this
      .props
      .form
      .validateFields((err, value) => {
        if (err) {
          return console.error(err);
        }

        if (this.props.onSubmit && this.props.onSubmit instanceof Function) {
          this
            .props
            .onSubmit(this.props.form, Object.assign({}, value));
        }
      })
  }

  onCancel() {
    // todo, find better way to check if onCancel is a function
    if (this.props.onCancel && this.props.onCancel instanceof Function) {
      this
        .props
        .onCancel(this.props.form);
    }
  }

  render() {

    const {getFieldDecorator} = this.props.form;

    const emailRule = getFieldDecorator('username', {
      rules: [
        {
          type: 'email',
          message: 'Email format not valid'
        }, {
          required: true,
          message: 'Please input your email'
        }
      ],
      initialValue: this.props.username
    });

    const passwordRule = getFieldDecorator('password', {
      rules: [
        {
          required: true,
          message: 'Please input your password'
        }
      ]
    })

    return (
      <Form>
        <FormItem>
          {emailRule(
            <Input className="box-input"
                   placeholder="Email"/>
          )}
        </FormItem>

        <FormItem>
          {passwordRule(
            <Input className="box-input'"
                   type="password"
                   placeholder="Password"/>
          )}
        </FormItem>

        <Button
          style={{
            width: "100%",
            marginBottom: 10
          }}
          type="primary"
          size="large"
          onClick={() => this.submit()}>
          Sign in
        </Button>
        <p>{this.props.footer}</p>
      </Form>
    )
  }
}

export default Form.create()(ComponentName);
