import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../base/Icon';
// eslint-disable-next-line import/no-unresolved
import './style.css';

var Tooltip = function Tooltip(tooltip) {
  var HeadingTag = 'h' + (tooltip.level ? tooltip.level : 2);
  var location = tooltip.location === 'above' ? 'ma__tooltip__modal--above' : 'ma__tooltip__modal--below';
  var openIcon = tooltip.openIcon ? React.createElement(Icon, { name: 'questionmark', svgHeight: 20, svgWidth: 20 }) : '';

  return React.createElement(
    'div',
    { className: 'ma__tooltip' },
    React.createElement(
      'div',
      { className: 'ma__tooltip__inner' },
      React.createElement('input', {
        id: tooltip.controlId,
        type: 'checkbox',
        className: 'ma__tooltip__control',
        'aria-label': tooltip.info,
        'aria-hidden': 'true'
      }),
      React.createElement(
        'label',
        {
          htmlFor: tooltip.controlId,
          className: 'ma__tooltip__open',
          'aria-labelledby': tooltip.controlId,
          'aria-hidden': 'true'
        },
        tooltip.openText,
        openIcon
      ),
      React.createElement(
        'section',
        { className: 'ma__tooltip__modal ' + location },
        React.createElement(
          'div',
          { className: 'ma__tooltip__container' },
          React.createElement(
            'label',
            {
              htmlFor: '{{ tooltip.controlId }}',
              className: 'ma__tooltip__close',
              tabIndex: '-1',
              'aria-labelledby': '{{ tooltip.controlId }}',
              'aria-hidden': 'true'
            },
            tooltip.closeText
          ),
          React.createElement(
            HeadingTag,
            { className: 'ma__tooltip__title' },
            tooltip.title
          ),
          React.createElement(
            'div',
            { className: 'ma__tooltip__message' },
            tooltip.message
          )
        )
      )
    )
  );
};

Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Text to display to prompt user */
  openText: PropTypes.string.isRequired,
  /** Text to display as close message. */
  closeText: PropTypes.string.isRequired,
  /** Tooltip Message */
  message: PropTypes.string.isRequired,
  /** Unique ID of tooltip */
  controlId: PropTypes.string.isRequired,
  /** Position of tip ('' or above) */
  location: PropTypes.string,
  /** description on link for screen readers */
  info: PropTypes.string.isRequired,
  /** SVG icon */
  openIcon: PropTypes.bool,
  /** Title of opened window */
  title: PropTypes.string,
  /** Heading level of title. Default h2 */
  level: PropTypes.number
} : {};

export default Tooltip;