'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

var _ = _interopRequireWildcard(_lodash);

var _2 = require('./..');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category controls
 * @component activity-button
 * @variations collab-ui-react
 */

var ActivityButton = function ActivityButton(props) {
  var type = props.type,
      large = props.large,
      onClick = props.onClick,
      disabled = props.disabled,
      className = props.className,
      ariaLabel = props.ariaLabel,
      otherHTMLProps = (0, _objectWithoutProperties3.default)(props, ['type', 'large', 'onClick', 'disabled', 'className', 'ariaLabel']);


  return _react2.default.createElement(
    _2.Button,
    (0, _extends3.default)({
      className: 'cui-activity' + ('' + (!type.icon && ' cui-activity__' + type || '')) + ('' + (large && ' cui-activity--large' || '')) + ('' + (className && ' ' + className || '')),
      circle: true,
      disabled: disabled,
      onClick: onClick,
      ariaLabel: ariaLabel || !type.icon && type || '',
      color: _.get(type, 'color')
    }, large && { containerLarge: true }, otherHTMLProps),
    type.icon ? type.icon : _react2.default.createElement(_2.Icon, { name: '' + type + (large ? '_36' : '_28') })
  );
};

ActivityButton.displayName = 'ActivityButton';

ActivityButton.defaultProps = {
  type: '',
  large: false,
  onClick: null,
  className: '',
  disabled: false,
  ariaLabel: ''
};

exports.default = ActivityButton;

/**
* @name Default Activity Button
* @description Default Activity Button.
*
* @category controls
* @component activity-button
* @section default
*
* @js

export default function ActivityButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Default</div>
      <div style={{margin: `16px`}}>
        <ActivityButton
          type='chat'
          ariaLabel='jlshjksfghjl'
          onClick={()=>{}}
          label='Chat'
        />
        <ActivityButton
          type='camera'
          onClick={()=>{}}
          label='Camera'
        />
        <ActivityButton
          type='meetings'
          onClick={()=>{}}
          label='Meetings'
        />
        <ActivityButton
          type='whiteboard'
          onClick={()=>{}}
          label='Whiteboard'
        />
        <ActivityButton
          type='files'
          onClick={()=>{}}
          label='Files'
        />
        <ActivityButton
          type='share-screen'
          onClick={()=>{}}
          label='Share'
        />
        <ActivityButton
          type='tasks'
          onClick={()=>{}}
          label='Tasks'
        />
      </div>
    </div>
  );
}

**/

/**
* @name ActivityButton with large
* @description ActivityButton with large class.
*
* @category controls
* @component activity-button
* @section large
*
* @js

export default function ActivityButtonLarge() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Default</div>
      <div style={{margin: `16px`}}>
        <ActivityButton
          type='chat'
          large
          onClick={()=>{}}
          label='Chat'
          ariaLabel='Chat'
        />
        <ActivityButton
          type='camera'
          large
          onClick={()=>{}}
          label='Camera'
          ariaLabel='Camera'
        />
        <ActivityButton
          type='meetings'
          large
          onClick={()=>{}}
          label='Meetings'
          ariaLabel='Meetings'
        />
        <ActivityButton
          type='whiteboard'
          large
          onClick={()=>{}}
          label='Whiteboard'
          ariaLabel='Whiteboard'
        />
        <ActivityButton
          type='files'
          large
          onClick={()=>{}}
          label='Files'
          ariaLabel='Files'
        />
        <ActivityButton
          type='share-screen'
          large
          onClick={()=>{}}
          label='Share'
          ariaLabel='Share'
        />
        <ActivityButton
          type='tasks'
          large
          onClick={()=>{}}
          label='Tasks'
          ariaLabel='Tasks'
        />
      </div>
    </div>
  );
}

**/

/**
* @name ActivityButton with custom
* @description ActivityButton with custom prop.
*
* @category controls
* @component activityButton
* @section custom
*
* @js

export default function ActivityButtonCustom() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Default</div>
      <div style={{margin: `16px`}}>
        <ActivityButton
          type={{
            color: 'mint',
            icon: <span className='icon icon-arrow-left_32'/>
          }}
          large
          onClick={()=>{}}
          ariaLabel='Left Arrow'
        />
        <ActivityButton
          type={{
            color: 'red',
            icon: <span className='icon icon-keyboard_16'/>
          }}
          onClick={()=>{}}
          ariaLabel='Keyboard'
        />
      </div>
    </div>
  );
}

**/

module.exports = exports['default'];