'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 _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

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

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

var Button = function (_React$PureComponent) {
  (0, _inherits3.default)(Button, _React$PureComponent);

  function Button() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Button);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.handleKeyPress = function (e) {
      var onClick = _this.props.onClick;

      e.preventDefault();
      if (e.which === 32 || e.which === 13) {
        return onClick(e);
      } else if (e.charCode === 32 || e.charCode === 13) {
        return onClick(e);
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Button.prototype.componentDidMount = function componentDidMount() {
    var _props = this.props,
        ariaLabel = _props.ariaLabel,
        ariaLabelledBy = _props.ariaLabelledBy;
    /* eslint-disable no-console */

    !ariaLabel && !ariaLabelledBy && console.warn('Accessibility could be improved with ariaLabel');
  };

  Button.prototype.render = function render() {
    var _props2 = this.props,
        active = _props2.active,
        label = _props2.label,
        color = _props2.color,
        expand = _props2.expand,
        onClick = _props2.onClick,
        ariaLabel = _props2.ariaLabel,
        ariaLabelledBy = _props2.ariaLabelledBy,
        containerLarge = _props2.containerLarge,
        className = _props2.className,
        disabled = _props2.disabled,
        loading = _props2.loading,
        large = _props2.large,
        style = _props2.style,
        type = _props2.type,
        tag = _props2.tag,
        href = _props2.href,
        circle = _props2.circle,
        children = _props2.children,
        otherHTMLProps = (0, _objectWithoutProperties3.default)(_props2, ['active', 'label', 'color', 'expand', 'onClick', 'ariaLabel', 'ariaLabelledBy', 'containerLarge', 'className', 'disabled', 'loading', 'large', 'style', 'type', 'tag', 'href', 'circle', 'children']);


    var getChildren = function getChildren() {
      return [_react2.default.createElement(
        'div',
        { style: { opacity: '' + (loading ? 1 : 0) }, key: 'child-0' },
        _react2.default.createElement(_.Loading, {
          small: circle && !large })
      ), _react2.default.createElement(
        'span',
        {
          className: 'cui-button__children',
          style: { opacity: '' + (loading ? 0 : 1) },
          key: 'child-1'
        },
        children
      )];
    };

    var button = _react2.default.createElement(tag, (0, _extends3.default)({
      ref: 'button',
      className: 'cui-button' + ('' + (circle && ' cui-button--circle' || '')) + ('' + (large && ' cui-button--large' || '')) + ('' + (expand && ' cui-button--expand' || '')) + ('' + (color && ' cui-button--' + color || '')) + ('' + (active && ' active' || '')) + ('' + (className && ' ' + className || '')),
      onClick: onClick,
      onKeyPress: this.handleKeyPress,
      style: style,
      disabled: disabled || loading,
      alt: ariaLabel || label,
      href: tag === 'a' && href || undefined,
      type: tag !== 'a' && type || '',
      role: tag !== 'button' && 'button' || ''
    }, ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-labelledby': ariaLabelledBy }, {
      tabIndex: 0
    }, otherHTMLProps), getChildren());

    return label ? _react2.default.createElement(
      'div',
      {
        className: 'cui-button__container' + (containerLarge ? '' : '--small')
      },
      button,
      _react2.default.createElement(
        'div',
        { className: 'cui-button__label' },
        label
      )
    ) : button;
  };

  return Button;
}(_react2.default.PureComponent);

Button.displayName = 'Button';


Button.defaultProps = {
  active: false,
  ariaLabel: '',
  ariaLabelledBy: '',
  containerLarge: false,
  expand: false,
  large: false,
  className: '',
  type: 'button',
  color: '',
  disabled: false,
  loading: false,
  style: {},
  onClick: null,
  tag: 'button',
  label: '',
  children: null,
  href: '',
  circle: false
};

exports.default = Button;

/**
* @name Default Buttons
* @description Default Button.
*
* @category controls
* @component button
* @section default
*
* @js

export default function ButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
        />
      </div>
    </div>
  );
}

**/

/**
* @name Large Buttons
* @description Create large buttons by passing in the <code>large</code> prop.
*
* @category controls
* @component button
* @section large
*
* @js
*
export default function ButtonDefault() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          large
        />
      </div>
    </div>
  );
}
*/

/**
* @name Button Tags
* @description Button with Tag
*
* @category controls
* @component button
* @section tags
*
*
* @js
export default function ButtonTags() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Tag Attribute (a)</div>
      <div className='columns small-3'>
        <Button
          children='Link'
          onClick={() => {}}
          ariaLabel='For the Win'
          tag='a'
        />
      </div>
    </div>
  );
}
**/

/**
* @name Button with Color
* @description Button with Color
*
* @category controls
* @component button
* @section colors
*
*
* @js
export default function ButtonColors() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div>Color Attribute</div>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          color='blue'
        />
      </div>
    </div>
  );
}
**/

/**
* @name Expanded Buttons
* @description Create block level buttons —those that span the full width of a parent— by passing in the <code>expand</code> prop.
*
* @category controls
* @component button
* @section expanded
*
*
* @js

export default function ButtonExpanded() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          expand
        />
      </div>
    </div>
  );
}
**/

/**
* @name Disabled Buttons
* @description Create large buttons by passing in the <code>disabled</code> prop.
*
* @category controls
* @component button
* @section disabled
*
*
* @js

export default function ButtonDisabled() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
    <div className='columns small-3'>
      <Button
        children='Test Me'
        onClick={() => {}}
        ariaLabel='For the Win'
        disabled
      />
    </div>
    </div>
  );
}
**/

/**
* @name Loading Buttons
* @description Create loading buttons by passing in the <code>loading</code> prop.
*
* @category controls
* @component button
* @section loading
*
*
* @js

export default function ButtonLoading() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children='Test Me'
          onClick={() => {}}
          ariaLabel='For the Win'
          loading
        />
      </div>
    </div>
  );
}
**/

/**
* @name Button with circle
* @description Button with circle, default is small
*
* @category controls
* @component button
* @section circle
*
*
* @js
import { Icon } from '@collab-ui/react';

export default function ButtonShape() {
  return(
    <div className='row' style={{marginBottom: '1rem'}}>
      <div className='columns small-3'>
        <Button
          children={<Icon name='icon-search_12' />}
          onClick={() => {}}
          ariaLabel='For the Win'
          circle
        />
      </div>
    </div>
  );
}
**/

/**
* @name Circular Buttons
* @description Create circular buttons by passing in the <code>circle</code> prop.
*
* @category controls
* @component button
* @section circle
*
*
* @js
import { Icon } from '@collab-ui/react';

export default function ButtonLargeCircle() {
  return(
    <div>
      <div className='row' style={{marginBottom: '1rem'}}>
        <div>Circle Button</div>
        <div className='columns small-3'>
          <Button
            children={<Icon name='icon-search_12' />}
            onClick={() => {}}
            ariaLabel='For the Win'
            circle
          />
        </div>
      </div>
      <div className='row' style={{marginBottom: '1rem'}}>
        <div>Large Circle Button</div>
        <div className='columns small-3'>
          <Button
            children={<Icon name='icon-search_16' />}
            onClick={() => {}}
            ariaLabel='For the Win'
            circle
            large
          />
        </div>
      </div>
    </div>
  );
}
**/

module.exports = exports['default'];