content: import React from 'react';
  import {BaseMixin, ElementaryMixin, ColorSchemaMixin, ContentMixin, Tools} from '../common/common.js';
  import Button from './button.js';
  
  import './button-group.less';
  
  export const ButtonGroup = React.createClass({
  
    //@@viewOn:mixins
    mixins: [
      BaseMixin,
      ElementaryMixin,
      ColorSchemaMixin,
      ContentMixin
    ],
    //@@viewOff:mixins
  
    //@@viewOn:statics
    statics: {
      tagName: 'UU5.Bricks.ButtonGroup',
      classNames: {
        main: 'uu5-bricks-button-group',
        horizontal: 'btn-group',
        vertical: 'btn-group-vertical'
        //displayBlock: 'btn-group-justified'
      },
      defaults: {
        childTagNames: ['UU5.Bricks.Button', 'UU5.Bricks.Dropdown', 'UU5.Bricks.ButtonSwitch']
      }
    },
    //@@viewOff:statics
  
    //@@viewOn:propTypes
    propTypes: {
      size: React.PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
      vertical: React.PropTypes.bool,
      allowTags: React.PropTypes.array
  
      // TODO: not possible for button, but for <a> element
      //displayBlock: React.PropTypes.bool
    },
    //@@viewOff:propTypes
  
    //@@viewOn:getDefaultProps
    getDefaultProps: function () {
      return {
        size: 'md',
        vertical: false,
        allowTags: []
        //displayBlock: false
      };
    },
    //@@viewOff:getDefaultProps
  
    //@@viewOn:standardComponentLifeCycle
    //@@viewOff:standardComponentLifeCycle
  
    //@@viewOn:interface
    //@@viewOff:interface
  
    //@@viewOn:overridingMethods
    shouldChildRender_:function(child) {
      var childTagName = Tools.getChildTagName(child);
      var childTagNames = this.props.allowTags.concat(this.getDefault().childTagNames);
      return childTagNames.indexOf(childTagName) > -1;
    },
  
    expandChildProps_: function (child, i) {
      var newChildProps = child.props;
      newChildProps = Tools.mergeDeep({}, newChildProps);
  
      newChildProps.size = this.props.size;
      newChildProps.disabled = this.isDisabled() || newChildProps.disabled;
  
      var childTagName = Tools.getChildTagName(child);
      if (childTagName === this.getDefault().childTagNames[1]) {
        var className = newChildProps.className ? newChildProps.className + ' ' : '';
        className += this.getClassName().horizontal;
        newChildProps.className = className;
      }
  
      return newChildProps;
    },
    //@@viewOff:overridingMethods
  
    //@@viewOn:componentSpecificHelpers
    _getMainAttrs: function () {
      var mainAttrs = this.buildMainAttrs();
  
      mainAttrs.className += ' ' + this.getClassName(this.props.vertical ? 'vertical' : 'horizontal');
      //this.props.displayBlock && (mainAttrs.className += ' ' + this.getClassName().displayBlock);
  
      return mainAttrs;
    },
    //@@viewOff:componentSpecificHelpers
  
    // Render
    _getChildren: function () {
      return this.getChildren() || this.buildChildren({children: <Button />});
    },
  
    //@@viewOn:render
    render: function () {
      return (
        <div {...this._getMainAttrs()}>
          {this._getChildren()}
        </div>
      );
    }
    //@@viewOff:render
  });
  
  export default ButtonGroup;