'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _shortid = require('shortid');

var _shortid2 = _interopRequireDefault(_shortid);

var _UtilityPanel = require('../UtilityPanel');

var _UtilityPanel2 = _interopRequireDefault(_UtilityPanel);

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

var _Icon2 = _interopRequireDefault(_Icon);

require('./styles.css');

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

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; }

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

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

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

    _this.state = {
      navSelected: -1,
      isOpen: _this.props.isOpen
    };
    _this.onClick = _this.onClick.bind(_this);
    _this.ident = _shortid2.default.generate();
    return _this;
  }

  UtilityNav.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var isOpen = nextProps.isOpen;

    this.setState({ isOpen: isOpen, navSelected: -1 });
  };

  UtilityNav.prototype.onClick = function onClick(divId, e) {
    e.preventDefault();
    this.setState({
      navSelected: this.state.navSelected === -1 ? divId : -1,
      isOpen: true
    });
  };

  UtilityNav.prototype.render = function render() {
    var _this2 = this;

    var navSelected = this.state.navSelected;
    var _props = this.props,
        googleLanguages = _props.googleLanguages,
        items = _props.items;

    return _react2.default.createElement(
      'div',
      { className: 'ma__utility-nav js-util-nav' },
      _react2.default.createElement(
        'ul',
        { className: 'ma__utility-nav__items' },
        googleLanguages && _react2.default.createElement(GoogleLanguages, null),
        items.map(function (item, itemIndex) {
          var newItem = Object.assign({}, item);
          newItem.navSelected = navSelected;
          // Use utility nav ident to make unique item ids.
          newItem.navIdent = _this2.ident;
          var isOpen = _this2.state.isOpen;

          return item.panel ?
          /* eslint-disable react/no-array-index-key */
          _react2.default.createElement(NavItem, { handleClick: _this2.onClick, data: newItem, key: 'navItem.' + itemIndex, index: itemIndex, isOpen: isOpen }) : _react2.default.createElement(NavItemLink, { key: 'navItem.' + itemIndex, data: item });
        })
      )
    );
  };

  return UtilityNav;
}(_react.Component);

var GoogleLanguages = function GoogleLanguages() {
  return _react2.default.createElement(
    'li',
    { key: 'li.googleLanguage', className: 'ma__utility-nav__item' },
    _react2.default.createElement(
      'div',
      { className: 'ma__utility-nav__translate' },
      _react2.default.createElement('div', { id: 'google_translate_element' }),
      _react2.default.createElement(
        'div',
        { className: 'ma__utility-nav__translate-icon' },
        _react2.default.createElement(_Icon2.default, { name: 'latlonglobe' })
      )
    )
  );
};

var NavItem = function NavItem(obj) {
  var item = obj.data;
  var divId = 'nav-content-' + item.navIdent + '-' + obj.index;
  var oneIsOpen = obj.isOpen;
  var thisIsOpen = item.navSelected === divId;
  var isExpanded = oneIsOpen && thisIsOpen ? 'is-open' : 'is-closed';
  var divProps = {
    className: 'ma__utility-nav__content js-util-nav-content ' + isExpanded,
    'aria-hidden': isExpanded ? 'false' : 'true',
    id: divId
  };
  var iconProps = {
    name: item.icon,
    ariaHidden: true
  };
  return _react2.default.createElement(
    'li',
    { className: 'ma__utility-nav__item js-util-nav-toggle' },
    _react2.default.createElement(
      'button',
      { onClick: function onClick(e) {
          return obj.handleClick(divId, e);
        }, className: 'ma__utility-nav__link ' + isExpanded, href: '#', 'aria-label': item.ariaLabelText || item.text },
      _react2.default.createElement(_Icon2.default, iconProps),
      _react2.default.createElement(
        'span',
        null,
        item.text
      )
    ),
    _react2.default.createElement(
      'div',
      divProps,
      _react2.default.createElement(
        'div',
        { className: 'ma__utility-nav__container' },
        _react2.default.createElement(
          'div',
          { className: 'ma__utility-nav__content-title' },
          _react2.default.createElement(
            'button',
            { onClick: function onClick(e) {
                return obj.handleClick(divId, e);
              }, className: 'ma__utility-nav__close js-close-util-nav' },
            _react2.default.createElement(
              'span',
              null,
              item.closeText
            ),
            _react2.default.createElement(
              'span',
              { className: 'ma__utility-nav__close-icon', 'aria-hidden': 'true' },
              '+'
            )
          ),
          _react2.default.createElement(_Icon2.default, iconProps),
          _react2.default.createElement(
            'span',
            null,
            item.text
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'ma__utility-nav__content-body' },
          _react2.default.createElement(_UtilityPanel2.default, item.panel)
        )
      )
    )
  );
};

var NavItemLink = function NavItemLink(obj) {
  var item = obj.data;
  var iconProps = {
    name: item.icon,
    ariaHidden: true
  };
  return _react2.default.createElement(
    'li',
    { className: 'ma__utility-nav__item js-util-nav-toggle' },
    _react2.default.createElement(
      'a',
      { className: 'ma__utility-nav__link', href: item.href, 'aria-label': item.ariaLabelText || item.text },
      _react2.default.createElement(_Icon2.default, iconProps),
      _react2.default.createElement(
        'span',
        null,
        item.text
      )
    )
  );
};

UtilityNav.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Boolean that controls when to show the google language dom. */
  googleLanguages: _propTypes2.default.bool,
  /** An array of navigation items to display to the user. */
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    /** The text to display for the main navigation item. */
    text: _propTypes2.default.string.isRequired,
    /** Defines the label to use with aria-label. */
    ariaLabelText: _propTypes2.default.string,
    /** The icon to display to the left of text. */
    icon: _propTypes2.default.oneOf(['building', 'login']),
    /** The href for the link if not a button. */
    href: _propTypes2.default.string,
    /** The text to use on the close link. */
    closeText: _propTypes2.default.string,
    /** Displays an utility panel when text is clicked. */
    panel: _propTypes2.default.shape(_UtilityPanel2.default.propTypes)
  })),
  /** Boolean that controls if any UtilityNav div should be should be open on mobile. */
  isOpen: _propTypes2.default.bool
} : {};

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