/**
*
* IKButtonGroup
*
*/

import React, { PureComponent } from 'react';


class IKButtonGroup extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    title: React.PropTypes.string,
    position: React.PropTypes.string,
    className: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const $buttons = $('.ikmd-btn-group').children('button');
    $buttons.width(`${100 / buttons.size()}%`);
  }

  render() {
    const props = $.extend({}, this.props);
    let className = 'ikmd-btn-group-container';

    if (props.className) {
      className += ` ${props.className}`;
    }

    if (props.position) {
      className += ` ikmd-btn-group-${props.position}`;
    }

    let titleArea = null;
    let buttons = [];
    let buttonGroup = null;
    if (props.title) {
      titleArea = (<div className="ikmd-btn-group-header">{props.title}</div>)
    }

    if (className.indexOf('ikmd-btn-group-bottom') > -1) {
      buttonGroup = (<div className="ikmd-btn-group-bottom-placeholder"></div>);
    }

    React.Children.map(props.children, (button) => {
      if (button && button.props.onClick) {
        buttons.push(<IKButton {...button.props}));
      } else {
        buttons.push(button);
      }
    });

    return (
      <div className="ikmd-btn-group-wrapper">
        <div className={className}>
          {titleArea}
          <div className="ikmd-btn-group">
            {buttons}
          </div>
          {buttonGroup}
        </div>
      </div>
    );
  }
}

export default IKButtonGroup;
