'use strict';

exports.__esModule = true;

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);

require('./style.css');

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

var Button = function Button(button) {
  var _classNames;

  var buttonClasses = (0, _classnames2.default)((_classNames = {
    ma__button: true
  }, _classNames['ma__button--' + button.usage] = button.usage, _classNames['ma__button--' + button.size] = button.size, _classNames['ma__button--' + button.theme] = button.theme, _classNames['ma__button--disabled'] = button.disabled, _classNames[button.classes.join(' ')] = button.classes, _classNames));
  var Element = button.href ? 'a' : 'button';
  var onClickCallback = function onClickCallback(e) {
    if (typeof button.onClick === 'function') {
      e.preventDefault();
      button.onClick(e);
    }
  };

  return _react2.default.createElement(
    Element,
    {
      className: buttonClasses,
      type: button.type,
      href: button.href,
      title: button.info,
      'aria-label': button.info,
      onClick: function onClick(e) {
        return onClickCallback(e);
      },
      disabled: button.disabled
    },
    button.children ? button.children : button.text
  );
};

Button.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom click handler function. */
  onClick: _propTypes2.default.func,
  /** When populated with a url, this component renders a <a> vs a <button> */
  href: _propTypes2.default.string,
  /** The text which renders in the standard browser tooltip on hover */
  info: _propTypes2.default.string,
  /** Button or link 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']),
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: _propTypes2.default.oneOf(['', 'c-primary-alt', 'c-highlight', 'c-gray-dark']),
  /** Button usage */
  usage: _propTypes2.default.oneOf(['', 'secondary', 'tertiary', 'quaternary']),
  /** Set button to disabled */
  disabled: _propTypes2.default.bool,
  /** Custom classnames appending to the button */
  classes: _propTypes2.default.arrayOf(_propTypes2.default.string)
} : {};

// Only set defaults for the configuration variables which need to be opted in to activate.
Button.defaultProps = {
  href: '',
  type: '',
  size: '',
  theme: '',
  usage: '',
  disabled: false,
  classes: ['']
};

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