import './asidenav.scss';

/**
 *
 * Asidenav Utility
 *  Correctly positions hovered asidenav submenus and handles the favorites button on mobile
 *
 * Attribute: uw-asidenav
 *
 * Example usage:
 *  <div uw-asidenav>
 *    <div .asidenav>
 *      <div .asidenav__box>
 *        <ul .asidenav__list.list--iconless>
 *          <li .asidenav__list-item>
 *            <a .asidenav__link-wrapper href="#">
 *              <div .asidenav__link-shorthand>EIP
 *              <div .asidenav__link-label>Einführung in die Programmierung
 *            <div .asidenav__nested-list-wrapper>
 *              <ul .asidenav__nested-list.list--iconless>
 *                Übungsblätter
 *                ...
 *
 */

var ASIDENAV_UTIL_NAME = 'asidenav';
var ASIDENAV_UTIL_SELECTOR = '[uw-asidenav]';

var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
var ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized';
var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';

var asidenavUtil = function(element) {

  function init() {
    if (!element) {
      throw new Error('Asidenav utility cannot be setup without an element!');
    }

    if (element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
      return false;
    }

    initFavoritesButton();
    initAsidenavSubmenus();

    // mark initialized
    element.classList.add(ASIDENAV_INITIALIZED_CLASS);

    return {
      name: ASIDENAV_UTIL_NAME,
      element: element,
      destroy: function() {},
    };
  }

  function initFavoritesButton() {
    var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
    favoritesBtn.addEventListener('click', function(event) {
      favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
      element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
      event.preventDefault();
    }, true);
  }

  function initAsidenavSubmenus() {
    var asidenavLinksWithSubmenus = Array.from(element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
      .map(function(listItem) {
        var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
        return { listItem, submenu };
      }).filter(function(union) {
        return union.submenu !== null;
      });

    asidenavLinksWithSubmenus.forEach(function(union) {
      union.listItem.addEventListener('mouseover', createMouseoverHandler(union));
    });
  }

  function createMouseoverHandler(union) {
    return function mouseoverHanlder() {
      var rectListItem = union.listItem.getBoundingClientRect();
      var rectSubMenu = union.submenu.getBoundingClientRect();

      union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px';
      if (window.innerHeight - rectListItem.top < rectSubMenu.height) {
        union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px';
      } else {
        union.submenu.style.top = rectListItem.top + 'px';
      }

    };
  }

  return init();
};

export default {
  name: ASIDENAV_UTIL_NAME,
  selector: ASIDENAV_UTIL_SELECTOR,
  setup: asidenavUtil,
};