/**
 * FIXED RESPONSIVE NAV
 *
 * (c) 2014 @adtileHQ
 * http://www.adtile.me
 * http://twitter.com/adtilehq
 *
 * Free to use under the MIT License.
 */

import responsiveNav from '../../../node_modules/responsive-nav';

export default function fixedResponsiveNav() {
  // Feature test to rule out some older browsers
  if ('querySelector' in document && 'addEventListener' in window) {
    // forEach method, that passes back the stuff we need
    var forEach = function(array, callback, scope) {
      for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]);
      }
    };

    // Init Responsive Nav
    var navigation = responsiveNav('.nav-collapse', {
      // Close the navigation when it's tapped
      closeOnNavClick: true,
      // Label for the navigation toggle
      label: `<div class="nav-toggle-icon"></div>`,
    });

    // Create a Mask
    var mask = document.createElement('div');
    mask.className = 'mask';

    // Append the mask inside <body>
    document.body.appendChild(mask);

    // Disable mask transitions on Android to boost performance
    if (navigator.userAgent.match(/Android/i) !== null) {
      document.documentElement.className += ' android';
    }

    // Find navigation links and save a reference to them
    var nav = document.querySelector('.nav-collapse ul'),
      links = nav.querySelectorAll('[data-scroll]');

    // "content" will store all the location cordinates
    var content;

    // Set up an array of locations which we store in "content"
    var setupLocations = function() {
      content = [];
      forEach(links, function(i, el) {
        var href = links[i].getAttribute('href').replace('#', '');
        content.push(document.getElementById(href).offsetTop + 200);
      });
    };

    // call locations set up once
    setupLocations();

    // Re-calculate locations on window resize and orientation change
    window.addEventListener(
      'resize',
      function() {
        setupLocations();
      },
      false
    );

    // Highlight active link on the navigation
    var selectActiveMenuItem = function(i) {
      forEach(links, function(i, el) {
        links[i].parentNode.className = links[i].parentNode.className.replace(/[\s]{0,}active/, '');
      });
      links[i].parentNode.className += links[i].parentNode.className ? ' active' : 'active';
    };

    // Highlight active link when scrolling
    var wasNavigationTapped = false;
    window.addEventListener(
      'scroll',
      function() {
        // Determine viewport and body size
        var top = window.pageYOffset,
          body = document.body,
          html = document.documentElement,
          viewport = window.innerHeight,
          bodyheight = Math.max(
            body.scrollHeight,
            body.offsetHeight,
            html.clientHeight,
            html.scrollHeight,
            html.offsetHeight
          );

        // For each content link, when it's in viewport, highlight it
        if (!wasNavigationTapped) {
          forEach(content, function(i, loc) {
            if (loc > top && (loc < top + 300 || top + viewport >= bodyheight)) {
              selectActiveMenuItem(i);
            }
          });
        }
      },
      false
    );

    // Close navigation when tapping the mask under it
    mask.addEventListener(
      'click',
      function(e) {
        e.preventDefault();
        navigation.close();
      },
      false
    );

    // Clear wasNavigationTapped check after scrolling
    var clearTapCheck = function() {
      setTimeout(function() {
        wasNavigationTapped = false;
      }, 500);
    };

    // When a navigation item is tapped, select it and begin scrolling
    forEach(links, function(i, el) {
      links[i].addEventListener(
        'click',
        function(e) {
          e.preventDefault();
          wasNavigationTapped = true;

          // Select right navigation item (we are passing which one to select "i")
          selectActiveMenuItem(i);

          // Show the URL of the section on the address bar
          var thisID = this.getAttribute('href').replace('#', ''),
            pane = document.getElementById(thisID);

          // If the URL isn't "#home", change it
          if (thisID !== 'home') {
            pane.removeAttribute('id');
            location.hash = '#' + thisID;
            pane.setAttribute('id', thisID);

            // If the URL is "#home", remove hash from the URL
          } else {
            if (history.pushState) {
              history.pushState('', document.title, window.location.pathname);
            }
          }

          // Clear wasNavigationTapped check
          clearTapCheck();
        },
        false
      );
    });
  }
}
