function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

import Collapse from '../../animations/Collapse';
import Icon from '../../base/Icon';
import Paragraph from '../../atoms/text/Paragraph';
import './style.css';

var HelpTip = function (_Component) {
  _inherits(HelpTip, _Component);

  function HelpTip(props) {
    _classCallCheck(this, HelpTip);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.getSplitText = function (text, triggers) {
      var splitText = text;
      triggers.forEach(function (trigger, index) {
        if (index === 0) {
          splitText = splitText.split(trigger);
        } else {
          var nextPart = splitText[index].split(trigger);
          splitText.pop();
          splitText = splitText.concat(nextPart);
        }
      });
      return splitText;
    };

    _this.toggleOpenForKeyUp = function (e, index) {
      if (e.which === 13 || e.which === 32) {
        // 13 is enter, 32 is spacebar
        e.preventDefault();
        e.stopPropagation();
        _this.toggleOpen(index);
      }
    };

    _this.toggleOpen = function (index) {
      var isOpen = _this.state.isOpen;

      isOpen[index] = !_this.state.isOpen[index];
      _this.setState({ isOpen: isOpen });
    };

    _this.buildDangerouslyIfHasMarkup = function (text, hasMarkup) {
      return (
        /* eslint-disable react/no-danger */
        hasMarkup ? React.createElement('span', { dangerouslySetInnerHTML: { __html: text } }) : text
      );
    };

    var openArray = _this.props.triggerText.map(function () {
      return false;
    });
    _this.state = {
      isOpen: openArray
    };
    return _this;
  }

  HelpTip.prototype.render = function render() {
    var _classNames,
        _classNames2,
        _classNames3,
        _classNames4,
        _this2 = this;

    var _props = this.props,
        hasMarkup = _props.hasMarkup,
        triggerText = _props.triggerText,
        helpText = _props.helpText,
        children = _props.children,
        id = _props.id,
        theme = _props.theme,
        text = _props.text,
        disabled = _props.disabled;


    var baseClass = classNames((_classNames = {
      'ma__help-tip': true,
      'mobile-tray': !this.props.bypassMobileStyle
    }, _classNames['ma__help-tip__text--' + theme] = theme, _classNames));
    var helpTextClasses = classNames((_classNames2 = {
      'ma__help-tip__text': !children,
      'ma__help-tip__text--children': children
    }, _classNames2['ma__help-tip__text--' + theme] = theme, _classNames2));
    var helpTextContainer = classNames((_classNames3 = {
      'ma__help-tip__container': true
    }, _classNames3['ma__help-tip__container--' + theme] = theme, _classNames3));
    var helpTextDirect = classNames((_classNames4 = {
      'ma__help-tip__text-direct': true
    }, _classNames4['ma__help-tip__text-direct--' + theme] = theme, _classNames4));
    var splitText = this.getSplitText(text, triggerText);
    var childArray = children && (Array.isArray(children) ? children : [children]);

    return React.createElement(
      'span',
      { className: baseClass, id: id },
      triggerText.map(function (trigger, index) {
        var triggerTextClasses = classNames({
          'ma__help-tip__trigger': true,
          'ma__help-tip__trigger--active': _this2.state.isOpen[index],
          'ma__help-tip__trigger--disabled': disabled
        });
        return (
          /* eslint-disable-next-line react/no-array-index-key */
          React.createElement(
            'span',
            { key: 'help-tip-label-' + id + '-' + index, className: 'ma__help-tip__label', id: 'label-' + id + '-' + index },
            index === 0 && _this2.buildDangerouslyIfHasMarkup(splitText[index], hasMarkup),
            React.createElement(
              'span',
              { className: 'ma_help-tip__label-a11y', id: 'context-a11y-' + id + '-' + index, 'aria-hidden': 'true' },
              _this2.state.isOpen[index] ? 'Close tooltip info about ' : 'Open tooltip info about ',
              _this2.buildDangerouslyIfHasMarkup(trigger, hasMarkup)
            ),
            React.createElement(
              'span',
              {
                className: triggerTextClasses,
                id: 'trigger-' + id + '-' + index,
                onClick: function onClick() {
                  return _this2.toggleOpen(index);
                },
                onKeyUp: function onKeyUp(e) {
                  return _this2.toggleOpenForKeyUp(e, index);
                },
                tabIndex: disabled ? -1 : 0,
                role: 'button',
                'aria-describedby': 'context-a11y-' + id + '-' + index,
                'aria-expanded': _this2.state.isOpen[index],
                'aria-controls': 'help-tip-content-' + id + '-' + index
              },
              _this2.buildDangerouslyIfHasMarkup(trigger, hasMarkup),
              React.createElement(Icon, { name: 'questionmark', svgHeight: 15, svgWidth: 15 })
            ),
            _this2.buildDangerouslyIfHasMarkup(splitText[index + 1], hasMarkup)
          )
        );
      }),
      triggerText.map(function (trigger, index) {
        return !disabled &&
        /* eslint-disable-next-line react/no-array-index-key */
        React.createElement(
          Collapse,
          { key: 'help-tip-collapse-' + id + '-' + index, 'in': _this2.state.isOpen[index], dimension: 'height', className: helpTextContainer },
          React.createElement(
            'div',
            { className: 'ma__help-tip__content', id: 'help-tip-content-' + id + '-' + index, 'aria-hidden': !_this2.state.isOpen[index] },
            React.createElement(
              'div',
              {
                tabIndex: '0',
                role: 'button',
                className: 'ma__help-tip__close-mobile',
                onClick: function onClick() {
                  return _this2.toggleOpen(index);
                },
                onKeyUp: function onKeyUp(e) {
                  return _this2.toggleOpenForKeyUp(e, index);
                },
                'aria-label': _this2.state.isOpen[index] && 'Close help tip.'
              },
              React.createElement(Icon, { name: 'close' })
            ),
            React.createElement(
              'div',
              {
                tabIndex: '0',
                role: 'button',
                className: 'ma__help-tip__close-desktop',
                onClick: function onClick() {
                  return _this2.toggleOpen(index);
                },
                onKeyUp: function onKeyUp(e) {
                  return _this2.toggleOpenForKeyUp(e, index);
                },
                'aria-label': _this2.state.isOpen[index] && 'Close help tip.'
              },
              React.createElement(Icon, { name: 'close' })
            ),
            (helpText || childArray) && React.createElement(
              'div',
              { className: helpTextClasses, 'aria-live': 'polite' },
              helpText && helpText[index] && React.createElement(Paragraph, { className: helpTextDirect, text: helpText[index] }),
              childArray && childArray[index] && childArray[index]
            )
          )
        );
      })
    );
  };

  return HelpTip;
}(Component);

HelpTip.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The text that will have one or more help tips inserted in it. */
  text: PropTypes.string,
  /** The text that will be a clickable inline toolitp */
  triggerText: PropTypes.arrayOf(PropTypes.string),
  /** The help text that is displayed on clicking the trigger text */
  /** You can also render children in the help text */
  helpText: PropTypes.arrayOf(PropTypes.string),
  /** The id for the whole component */
  id: PropTypes.string.isRequired,
  /** Whether you want the help text to slide up on mobile screens */
  bypassMobileStyle: PropTypes.bool,
  /** Whether text contains html markup */
  hasMarkup: PropTypes.bool,
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: PropTypes.oneOf(['c-primary', 'c-primary-alt', 'c-highlight', 'c-gray-dark', 'c-error-red', 'c-white']),
  /** Disable helptip trigger text */
  disabled: PropTypes.bool,
  children: PropTypes.node
} : {};

HelpTip.defaultProps = {
  hasMarkup: true,
  theme: 'c-primary',
  bypassMobileStyle: false
};

export default HelpTip;