import React from 'react';
import {observer, inject} from 'mobx-react';
import {Form, Input, Button, Select, DatePicker, Icon} from 'antd'
const {Option, OptGroup} = Select;

const FormItem = Form.Item;

@inject('appstate')
@observer
class InviteConfirmationForm extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {
    console.log('InviteConfirmationForm loaded!')
  }

  render() {

    const {getFieldDecorator} = this.props.form;

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

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

    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: {span: 24, offset: 0},
        sm: {span: 14, offset: 6},
      },
    };

    const formItemLayoutFull = {
      wrapperCol: {
        xs: {span: 24, offset: 0},
        sm: {span: 24, offset: 0},
      },
    };

    return (
      <Form>
        <FormItem label={"Your new Password"}>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: 'Cannot be empty',
              },
              {
                min: 4,
                message: 'at least 4 character'
              }
            ]
          })(<Input type={"password"} />)}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(InviteConfirmationForm);