import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './style.css';

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

  var buttonClasses = classNames((_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 React.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: PropTypes.func,
  /** When populated with a url, this component renders a <a> vs a <button> */
  href: PropTypes.string,
  /** The text which renders in the standard browser tooltip on hover */
  info: PropTypes.string,
  /** Button or link text */
  text: PropTypes.string,
  /** HTML <button> 'type' attribute  */
  type: PropTypes.oneOf(['submit', 'reset', 'button', '']),
  /** Create a smaller button */
  size: PropTypes.oneOf(['', 'small', 'large']),
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: PropTypes.oneOf(['', 'c-primary-alt', 'c-highlight', 'c-gray-dark']),
  /** Button usage */
  usage: PropTypes.oneOf(['', 'secondary', 'tertiary', 'quaternary']),
  /** Set button to disabled */
  disabled: PropTypes.bool,
  /** Custom classnames appending to the button */
  classes: PropTypes.arrayOf(PropTypes.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: ['']
};

export default Button;