'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _airbnbPropTypes = require('airbnb-prop-types');

var _Icon = require('../../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

require('./style.css');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var ButtonWithIcon = function ButtonWithIcon(props) {
  var _classNames;

  var classes = props.classes,
      iconSize = props.iconSize,
      icon = props.icon,
      expanded = props.expanded,
      capitalized = props.capitalized,
      usage = props.usage,
      theme = props.theme,
      setButtonRef = props.setButtonRef,
      text = props.text,
      size = props.size,
      rest = _objectWithoutProperties(props, ['classes', 'iconSize', 'icon', 'expanded', 'capitalized', 'usage', 'theme', 'setButtonRef', 'text', 'size']);

  var buttonClasses = (0, _classnames2.default)((_classNames = {
    'ma__button-icon': true
  }, _classNames['ma__button-icon--' + size] = size, _classNames['ma__button-icon--expanded'] = expanded, _classNames['ma__button-icon--capitalized'] = capitalized, _classNames['ma__icon-small'] = iconSize === 'small' || icon.props.name === 'chevron', _classNames['ma__button-search'] = icon.props.name === 'search', _classNames['ma__button-search--secondary'] = icon.props.name === 'search' && usage === 'secondary', _classNames['ma__button-icon--' + theme] = theme, _classNames['ma__button-icon--' + usage] = usage, _classNames[classes.join(' ')] = classes, _classNames));
  var buttonProps = _extends({}, rest, {
    className: buttonClasses,
    tabIndex: 0
  });
  return _react2.default.createElement(
    'button',
    _extends({}, buttonProps, { ref: setButtonRef, 'aria-expanded': expanded }),
    _react2.default.createElement(
      'span',
      null,
      text
    ),
    icon
  );
};

ButtonWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
  /** id for the button */
  id: _propTypes2.default.string,
  // Function to run on click of the button.
  onClick: _propTypes2.default.func,
  // Sets a reference to the button onto the passed node.
  setButtonRef: (0, _airbnbPropTypes.ref)(),
  // Button text.
  text: _propTypes2.default.string,
  /** HTML <button> 'type' attribute  */
  type: _propTypes2.default.oneOf(['submit', 'reset', 'button', '']),
  /** Create a smaller button */
  size: _propTypes2.default.oneOf(['', 'small', 'large']),
  // Button classes.
  classes: _propTypes2.default.arrayOf(_propTypes2.default.string),
  // Icon to display within the button.
  icon: _propTypes2.default.element,
  // Adds expanded class to button if true.
  expanded: _propTypes2.default.bool,
  // Adds capitalized class to button if true.
  capitalized: _propTypes2.default.bool,
  // Defines the size, default size fits the most square icons and "small" setting is specific for the chevron icon.
  iconSize: _propTypes2.default.oneOf(['', 'small']),
  /** The aria-label property is used to provide the label to any assistive
   * technologies. This is useful if the text value is not descriptive of the
   * button's functionality. */
  'aria-label': _propTypes2.default.string,
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: _propTypes2.default.oneOf(['', 'c-primary', 'c-highlight', 'c-gray-dark', 'c-black']),
  /** Button usage */
  usage: _propTypes2.default.oneOf(['', 'secondary', 'tertiary', 'quaternary', 'quaternary-simple', 'alert']),
  /** Whether the button has a popup or not */
  'aria-haspopup': _propTypes2.default.bool
} : {};

ButtonWithIcon.defaultProps = {
  text: 'Search',
  type: 'submit',
  size: '',
  classes: [],
  icon: _react2.default.createElement(_Icon2.default, { name: 'search', svgHeight: 20, svgWidth: 20 }),
  capitalized: false,
  iconSize: '',
  'aria-label': '',
  usage: '',
  theme: '',
  'aria-haspopup': false
};

exports.default = ButtonWithIcon;
module.exports = exports['default'];