content: import React from 'react';
  import {BaseMixin, ElementaryMixin, SectionMixin} from './../common/common.js';
  import {Button} from './../bricks/bricks.js';
  import FormMixin from './mixins/form-mixin.js';
  
  import './basic-form.less';
  
  export const BasicForm = React.createClass({
  
    mixins: [
      BaseMixin,
      ElementaryMixin,
      SectionMixin,
      FormMixin
    ],
  
    statics: {
      tagName: 'UU5.Forms.BasicForm',
      classNames: {
        main: 'uu5-forms-basic-form',
        buttons: 'uu5-forms-basic-form-buttons',
        submit: 'uu5-forms-basic-form-submit-button',
        reset: 'uu5-forms-basic-form-reset-button',
        cancel: 'uu5-forms-basic-form-cancel-button'
      }
    },
  
    propTypes: {
      // TODO not supported vertical and inline
      style: React.PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
      ignoreValidation: React.PropTypes.bool,
      submitLabel: React.PropTypes.string,
      resetLabel: React.PropTypes.string,
      cancelLabel: React.PropTypes.string,
      onSubmit: React.PropTypes.func,
      onReset: React.PropTypes.func,
      onCancel: React.PropTypes.func,
      submitColorSchema: React.PropTypes.string,
      resetColorSchema: React.PropTypes.string,
      cancelColorSchema: React.PropTypes.string
    },
  
    // Setting defaults
    getDefaultProps: function () {
      return {
        style: 'horizontal',
        ignoreValidation: false,
        submitLabel: null,
        resetLabel: null,
        cancelLabel: null,
        onSubmit: null,
        onReset: null,
        onCancel: null,
        submitColorSchema: null,
        resetColorSchema: null,
        cancelColorSchema: null
      };
    },
  
    // Interface
  
    // Component Specific Helpers
    _onSubmit: function (e) {
      if (this.props.ignoreValidation || this.isValid()) {
        typeof this.props.onSubmit === 'function' && this.props.onSubmit(this, e);
      } else {
        // TODO throw some error?
      }
    },
  
    _onReset: function (e) {
      if (typeof this.props.onReset === 'function') {
        this.props.onReset(this, e);
      } else {
        this.reset();
      }
    },
  
    _onCancel: function (e) {
      typeof this.props.onCancel === 'function' && this.props.onCancel(this, e);
    },
    _getMainAttrs: function() {
      var mainAttrs = this.buildMainAttrs();
      mainAttrs.className += ' form-' + this.props.style;
      return mainAttrs;
    },
  
    // Render
    render: function () {
      return (
          <form {...this._getMainAttrs()}>
            {this.getHeaderChild()}
            {this.getChildren()}
  
            <div className={this.getClassName().buttons}>
              {this.props.submitLabel &&
              <Button content={this.props.submitLabel}
                                 className={this.getClassName().submit}
                                 colorSchema={this.props.submitColorSchema || 'success'}
                                 onClick={this._onSubmit}
              />}
              {this.props.resetLabel &&
              <Button content={this.props.resetLabel}
                                 className={this.getClassName().reset}
                                 colorSchema={this.props.resetColorSchema || 'primary'}
                                 onClick={this._onReset}
              />}
              {this.props.cancelLabel &&
              <Button content={this.props.cancelLabel}
                                 className={this.getClassName().cancel}
                                 colorSchema={this.props.cancelColorSchema || 'default'}
                                 onClick={this._onCancel}
              />}
            </div>
  
            {this.getFooterChild()}
            {this.getDisabledCover()}
          </form>
      );
    }
  });
  
  export default BasicForm;