'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Icon = require('../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

require('./style.css');

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

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 ? _react2.default.createElement(_Icon2.default, { name: 'questionmark', svgHeight: 20, svgWidth: 20 }) : '';

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


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

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