// @author ilex.h
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Log } from 'amos-tool';
import { Form } from 'amos-antd';
import { Button, Input } from 'amos-framework';

const createForm = Form.create();
const FormItem = Form.Item;

/**
 * 新增桌面 form
 *
 * @class CreateDesk
 * @extends {Component}
 */
class CreateDesk extends Component {

  static propTypes = {
    form: PropTypes.any,
    onSaveNewDesk: PropTypes.func,
    onCancel: PropTypes.func
  };

  constructor(props, context) {
    super(props, context);
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (errors) {
        Log.error('Errors in form!!!');
        return;
      }
      this.props.form.resetFields();
      this.props.onSaveNewDesk(values.deskName);
    });
  }

  render() {
    const { onCancel, form } = this.props;
    const { getFieldProps } = form;

    const deskNameProps = getFieldProps('deskName', {
      initialValue: '',
      rules: [
        { required: true, message: '请输入桌面名称' }
      ]
    });

    return (
      <Form inline>
        <FormItem label="桌面名称:">
          <Input className='login-input' {...deskNameProps} style={{ width: 200 }} />
        </FormItem>
        <div className="form-footer">
          <Button key="back" onClick={onCancel}>取消</Button>
          <Button key="submit" type="primary" onClick={this.handleSubmit}>确定</Button>
        </div>
      </Form>
    );
  }
}

export default createForm(CreateDesk);
