export default class SiteNav {

constructor() {
  // this.navType set in initNavType();
  // this.visited set in initVisited();
  this.visitedNav = document.getElementById('visited-nav');
  this.navTypeCheckBox = document.getElementById('nav-type-checkbox');
  this.navTypeEmojiSpan = document.getElementById('nav-type-emoji-span');
  this.deleteVisitedBtn = document.getElementById('delete-btn');
  this.init();
}

init() {
  this.initNavType();
  this.initVisited();
  this.bindEvents();
  this.addVisited();
}

bindEvents() {
  this.navTypeCheckBox.addEventListener('click', () => {
    this.updateNavType();
  });
  this.deleteVisitedBtn.addEventListener('click', () => {
    this.deleteVisitedHistory();
  });
}

initNavType() {
  this.navType = localStorage.getItem('nav-type');
  if (this.navType !== "graph" && this.navType !== "tabs") {
    this.navType = '{{ site.nav_type }}';     
  }
  this.navTypeCheckBox.checked = (this.navType === "graph");
  this.updateNavType();
}

initVisited() {
  this.visited = JSON.parse(localStorage.getItem('visited'));
  if (!this.visited) this.visited = [];
}

updateNavType() {
  if (this.navTypeCheckBox.checked) {
    this.navTypeEmojiSpan.innerText = "🥾";
    this.navType = "graph";
    this.visitedNav.classList.remove("show");
    this.visitedNav.classList.add("hide");
    document.getElementById("svg-graph").classList.remove("hide");
  } else {
    this.navTypeEmojiSpan.innerText = "🪴";
    this.navType = "tabs";
    document.getElementById("svg-graph").classList.add("hide");
    this.visitedNav.classList.remove("hide");
    this.visitedNav.classList.add("show");
  }
  localStorage.setItem('nav-type', this.navType);
}

//
// visited
//

addVisited() {
  if (this.visited) {
    // remove duplicates to current (since json and !SortedSet)
    // step backward so splicing doesn't change indeces as tabs are removed
    for (var i = this.visited.length - 1; i > -1; i--) {
      let aTab = this.visited[i];
      if ((aTab['title'] == window.document.title) 
        && (aTab['url'] == window.location.pathname)) {
          this.visited.splice(i, 1);
      }
    }
    this.visited.push({ title: window.document.title, url: window.location.pathname }); 
    localStorage.setItem('visited', JSON.stringify(this.visited));
  }
  this.buildVisitedTabs();
}

deleteVisitedHistory() {
  // reset visited data
  this.visited = [];
  localStorage.setItem('visited', JSON.stringify([]));
  // reset visible elements
  document.getElementById('svg-graph').dispatchEvent(new Event('draw')); // tell graph to redraw itself
  this.visitedNav.innerHTML = "";
  this.buildVisitedTabs();
}

// 
// dynamically built elements 
// 

buildNavLink(title, url) {
  var visitedNavLink = document.createElement('a');
  visitedNavLink.setAttribute('href', url);
  visitedNavLink.classList.add('wiki-link');
  visitedNavLink.innerText = title;
  return visitedNavLink;
}

buildNavList() {
  var visitedNavList = document.createElement('ul');
  visitedNavList.classList.add('visited-nav-list');
  return visitedNavList;
}

buildNavListItem(i, o) {
  var visitedNavListItem = document.createElement('li');
  visitedNavListItem.classList.add('visited-nav-list-item');
  visitedNavListItem.classList.add('show');
  visitedNavListItem.setAttribute('style', `--animation-show-order: ${i};`);
  // visitedNavListItem.setAttribute('style', `--animation-hide-order: ${o};`);
  return visitedNavListItem;
}

buildVisitedTabs() {
  var visitedNavList = this.buildNavList();
  this.visitedNav.appendChild(visitedNavList);
  for (var i = this.visited.length - 1; i > -1; i--) {
    const visitedDoc = this.visited[i];
    var visitedNavListItem = this.buildNavListItem(this.visited.length - i, i);
    var visitedNavLink = this.buildNavLink(visitedDoc['title'], visitedDoc['url']);
    visitedNavListItem.appendChild(visitedNavLink);
    visitedNavList.appendChild(visitedNavListItem);
  }
}

}