import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'react-oui-icons';
import classNames from 'classnames';
import { FILL_COLOR_MAP } from '../../utils/accessibility';

var ButtonIcon = function ButtonIcon(_ref) {
  var buttonRef = _ref.buttonRef,
      iconFill = _ref.iconFill,
      iconName = _ref.iconName,
      isDisabled = _ref.isDisabled,
      onClick = _ref.onClick,
      size = _ref.size,
      style = _ref.style,
      testSection = _ref.testSection,
      title = _ref.title;
  // ensure valid fillColor name (in the case that propType errors are ignored)
  var fillColor = iconFill && Object.keys(FILL_COLOR_MAP).includes(iconFill) ? FILL_COLOR_MAP[iconFill] : null;

  function handleOnClick(event) {
    if (isDisabled) {
      return;
    }

    onClick(event);
  }

  return React.createElement("button", {
    className: classNames('oui-button', 'oui-button-icon', "oui-button-icon__".concat(size), "oui-button--".concat(style)),
    "data-oui-component": true,
    "data-test-section": testSection,
    disabled: isDisabled,
    onClick: handleOnClick,
    ref: buttonRef,
    title: title
  }, React.createElement(Icon, {
    name: iconName,
    size: size,
    fill: fillColor
  }));
};

ButtonIcon.propTypes = {
  /** React ref to the underlying button component */
  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.instanceOf(Element)
  })]),

  /**
   *  Color to use for the fill of the icon
   */
  iconFill: PropTypes.oneOf(Object.keys(FILL_COLOR_MAP)),

  /**
   *  Name of the icon to use
   */
  iconName: PropTypes.string.isRequired,

  /**
   * Prevent users from interacting with the button
   */
  isDisabled: PropTypes.bool,

  /**
   *  Function to perform when the close button is clicked.
   */
  onClick: PropTypes.func.isRequired,

  /**
   *  Size of the button, medium by default
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),

  /**
   *  Various style options
   */
  style: PropTypes.oneOf(['highlight', 'danger', 'danger-outline', 'outline', 'plain']),

  /**
   * Hook for automated JavaScript tests
   */
  testSection: PropTypes.string,

  /**
   *  Title of the button used on hover and for screen readers
   */
  title: PropTypes.string.isRequired
};
ButtonIcon.defaultProps = {
  iconName: 'add',
  onClick: function onClick() {},
  size: 'medium',
  title: ''
};
export default ButtonIcon;