// NOTES:
// Not really terribly flexible yet, as it requires a lot of hardcoding of values and it tricky to get working with right-aligned navs

//https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
// forEach method, could be shipped as part of an Object Literal/Module
function forEach(array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
}

// Cacheing DOM items
var indicator = document.getElementById("indicator"),
  nav = document.getElementById("main-nav"),
  navItems = document.querySelectorAll("nav > ul li a"),
  paddingCompensation = "1em",
  resetButton = document.getElementById("reset");

resetButton.addEventListener("click", function(event) {
  resetState(event);
});

// State
var activeState = false,
  activeLink;

// Default position of indicator, captured from styles
var defaultSettings = {
  left: window.getComputedStyle(indicator, null).getPropertyValue("left"),
  width: window.getComputedStyle(indicator, null).getPropertyValue("width")
};

// If a link is "active" set the indicator's position to it instead of the default
function activeLinkSet() {
  let thisPosition = activeLink.getBoundingClientRect();
  let thisWidth = activeLink.offsetWidth;
  let thisHeight = activeLink.offsetHeight;
  indicator.style.left = "calc(" + thisPosition.x + "px - 1em)";
  indicator.style.width = thisWidth + "px";
  indicator.classList.add("active");
}

// Returns to default on hover out
function returnToDefault() {
  indicator.style.left = defaultSettings.left;
  indicator.style.width = defaultSettings.width;
  indicator.classList.remove("active");
  resetButton.classList.remove("show");
}

// Logic for everything, should probably rename this since it's used on more than hover. Takes event, and a string for logic as parameters
function handleHover(e, direction) {
  if (direction === "set active") {
    // if we're setting active, run that function
    activeLinkSet();
  } else {
    // otherwise, check hover in or out
    if (direction === "in") {
      // if hover in, get the event target's settings and apply them.
      let thisPosition = e.currentTarget.getBoundingClientRect();
      let thisWidth = e.currentTarget.offsetWidth;
      let thisHeight = e.currentTarget.offsetHeight;
      // calc is here for difficulties with getBoundingClientRect and padding issues
      indicator.style.left =
        "calc(" + thisPosition.x + "px - " + paddingCompensation + ")";
      indicator.style.width = thisWidth + "px";
      indicator.classList.add("active");
    } else if (direction === "out") {
      // if hover out, set back to a default, depending on state of activeState
      if (activeState === true) {
        activeLinkSet();
      } else {
        returnToDefault();
      }
    }
  }
}

// for each lopps to add event listeners to links
forEach(navItems, function(index, value) {
  navItems[index].addEventListener("mouseenter", function(event) {
    handleHover(event, "in");
  });
  navItems[index].addEventListener("click", function(event) {
    handleClick(event);
  });
});

// hover out is actually on the nav element itself, not the links!!!
nav.addEventListener("mouseleave", function(event) {
  handleHover(event, "out");
});

// fake link clicking
// could be replaced by something simpler on a real multi-page site
function handleClick(e) {
  e.preventDefault();
  resetState();
  // add active to current target
  e.currentTarget.classList.add("active");
  // set state
  activeState = true;
  // set active link
  activeLink = e.currentTarget;
  // run logic function to set placement of indicator
  handleHover(e, "set active");
  // turn reset button on
  resetButton.classList.add("show");
}

function resetState() {
  activeState = false;
  // get all links
  let allLinks = document.querySelectorAll("nav a");
  // link is clicked, remove all active classes, just in case
  for (var i = 0; i < allLinks.length; i++) {
    allLinks[i].classList.remove("active");
  }
  returnToDefault();
}