import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Icon extends Component {
  static propTypes = {
    icon: PropTypes.any.isRequired,
    dimension: PropTypes.oneOf(['small']),
    width: PropTypes.string,
    className: PropTypes.string,
    semantic: PropTypes.string,
  };
  static defaultProps = {
    dimension: null,
    width: '22px',
    className: null,
    semantic: null,
  };

  render() {
    const { icon, dimension, width, className, semantic, ...props } = this.props;

    const baseClassName = `Icon${dimension ? ` Icon--${dimension}` : ''}`;
    props.className = baseClassName + (className ? ` ${className}` : '');
    // Fucking IE...
    if (width) props.width = width;

    // Icons have always aria-hidden set to true
    props['aria-hidden'] = true;
    props.key = 'icon';
    props.focusable = 'false';

    // If an icon adds some semantic to the document, then add a text helper visible only by screeen readers
    return [
      React.createElement(icon, props),
      semantic ? (
        <span className="u-srOnly" key="text">
          {semantic}
        </span>
      ) : null,
    ].filter(element => element);
  }
}

export default Icon;