// cheap querystring.stringify() alternative!
function stringifyQuery(obj) {
  var str = [];
  for (var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

// function to get URL query parameters
function getQueryParams(url, callback) {
  // the value of url should usually be: "window.location.href"
  let queryParams = {};
  if (url.split("?").length > 1 && url.split("?")[1].length > 0) {
    let queryParamStrings = url.split("?")[1].split("&")
    for (i = 0; i < queryParamStrings.length; i++) {
      if (queryParamStrings[i].indexOf("=") > 0) {
        let [k, v] = queryParamStrings[i].split("=");
        queryParams[k] = v;
      }
    }
  };
  return queryParams;
};

// Update the query parameteres in the address bar...
function updateUrlQuery(parameter,value) {
  let params = getQueryParams(window.location.href);
  if (value.length == 0) {
    delete params[parameter];
  } else {
    params[parameter] = value.trim();
  }
  if (Object.keys(params).length > 0) {
    window.history.pushState("", "", "?".concat(stringifyQuery(params)))
  } else {
    window.history.pushState("", "", window.location.pathname);
  }
}

// function to acknowledge announcement banner messages
function acknowledgeAnnouncement(element) {
  var announcement = $(element).parents(".announcement")[0];
  var announcementData = $(announcement).find("input");
  localStorage[announcementData.attr("name")] = announcementData.attr("value");
  $(announcement).addClass("hidden");
};

// toggle platform-specific content
function updatePlatformSpecificContent() {
  switch ($("#metadata").attr("platform")) {
    case "linux":
      console.log("switching platform-specific content to \"linux\"")
      $("[platform=default]").addClass("hidden").removeClass("active");
      $("[platform=macos]").addClass("hidden").removeClass("active");
      $("[platform=windows]").addClass("hidden").removeClass("active");
      $("[platform=linux]").addClass("active").removeClass("hidden");
      // $(".window-body-content").attr("data-platform","linux");
      break;
    case "macos":
      console.log("switching platform-specific content to \"macos\"")
      $("[platform=default]").addClass("hidden").removeClass("active");
      $("[platform=linux]").addClass("hidden").removeClass("active");
      $("[platform=windows]").addClass("hidden").removeClass("active");
      $("[platform=macos]").addClass("active").removeClass("hidden");
      // $(".window-body-content").attr("data-platform","macos");
      break;
    case "windows":
      console.log("switching platform-specific content to \"windows\"")
      $("[platform=default]").addClass("hidden").removeClass("active");
      $("[platform=linux]").addClass("hidden").removeClass("active");
      $("[platform=macos]").addClass("hidden").removeClass("active");
      $("[platform=windows]").addClass("active").removeClass("hidden");
      // $(".window-body-content").attr("data-platform","windows");
      break;
    default:
    // default action
  };
};

// Metadata watcher callback
const metadataWatcher = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
      updatePlatformSpecificContent();
    }
  }
};

function getAnchors() {
  let anchors = [];
  anchors = anchors.concat(Array.from(document.querySelectorAll(".header-anchor")));
  return anchors;
};


document.addEventListener("DOMContentLoaded", function(){
  // override platform-specific content via url parameters
  let params = getQueryParams(window.location.href);
  let metadata = document.querySelectorAll("#metadata")[0];
  if (Object.keys(params).length > 0) {
    if (params.hasOwnProperty("platform")) {
      metadata.setAttribute("platform", params["platform"]);
    }
  };

  // update platform-specific content
  updatePlatformSpecificContent();
  var platformData = document.querySelector("#metadata");
  var config = { attributes: true, childList: false, subtree: false };
  var observer = new MutationObserver(metadataWatcher);
  observer.observe(platformData, config);

  // cross-platform copy to clipboard
  var clipboard = new ClipboardJS('.window-clipboard-button', {
    text: function (trigger) {
      var clipSelector = ".window-body-clipboard[platform=" + $(trigger).attr("platform") + "]";
      var clip = $(trigger).parent(".window-body-content").children(clipSelector)[0];
      return $.trim(clip.innerHTML);
    }
  });
  clipboard.on('success', function (e) {
    $(e.trigger).removeClass("far")
    $(e.trigger).addClass("fas")
    $(e.trigger).css("color", "rgba(137,201,103,1.0)");
  });
  clipboard.on('error', function (e) {
    $(e.trigger).css("color", "rgba(204,33,33,1.0)");
  })

  // platform toggles
  $(".window-platform-toggle").click(function () {
    $(this).addClass("active");
    let platform = $(this).attr("platform");
    let contents = $(this).parent(".window-platform-toggles").parent(".window-chrome").siblings(".window-body").children(".window-body-content");
    $(this).siblings(".active").removeClass("active");
    contents.children(".active").addClass("hidden").removeClass("active");
    contents.children("[platform=" + platform + "]").addClass("active").removeClass("hidden");
  });

  // show/hide sidebar navigation
  $("#hamburger-menu").click(function () {
    $(".sidebar-underlay").addClass("active");
    $(".sidebar").addClass("active");
  });
  $(".sidebar-underlay").click(function () {
    $(".sidebar-underlay").removeClass("active");
    $(".sidebar").removeClass("active");
  });

  // announcements banners
  var announcements = document.querySelectorAll(".announcement:not(.notification)");
  if (announcements.length > 0) {
    for (i = 0; i < announcements.length; i++) {
      var announcement = announcements[i]
      var announcementData = announcement.querySelector("input");
      if (!localStorage[announcementData.getAttribute("name")]) {
        announcement.classList.remove("hidden");
        break;
      };
    };
  };

  // registration confirmation banner
  var urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get("registration") == "success") {
    var notification = $(".registration-confirmation.notification");
    notification.removeClass("hidden");
  }

  // initialize hover toggles
  let initialHoverToggle = document.querySelectorAll(".hover-toggle-active:first-child");
  if (initialHoverToggle.length > 0) {
    toggle = initialHoverToggle[0]
    toggle.classList.add("active");
    toggle.classList.add( toggle.getAttribute("theme-active") );
    toggle.classList.remove( toggle.getAttribute("theme-default") );
  }

  // hover toggle function
  $(".hover-toggle-active").hover(function () {
    $(this).siblings(".hover-toggle-active").removeClass("active");
    $(this).addClass("active");

    $(this).siblings(".hover-toggle-active").removeClass($(this).attr("theme-active"));
    $(this).siblings(".hover-toggle-active").addClass($(this).attr("theme-default"));

    $(this).addClass($(this).attr("theme-active"));
    $(this).removeClass($(this).attr("theme-default"));
  })

  // TOC for blog posts and resource pages
  let toc = document.querySelector("#toc");
  let anchors = getAnchors();
  if ( !!toc && !!anchors && !anchors.length > 0 ) {
    toc.remove()
  } else if ( !!toc ) {
    let tocHeading = document.createElement("h5");
    tocHeading.innerText = document.querySelector("h1").innerText;
    toc.appendChild(tocHeading);
    for (a=0; a<anchors.length; a++) {
      let anchor  = anchors[a];
      let heading = anchor.parentElement;
      let level   = heading.tagName;
      let tocItem = document.createElement("div");
      let tocLink = document.createElement("a");
      tocLink.innerText = heading.innerText;
      tocLink.href = anchor.href;
      tocLink.classList.add("content-link",level);
      tocItem.appendChild(tocLink);
      toc.appendChild(tocItem);
    }
  };

  // Don't show related resources div if none are available
  let relatedItems = [].concat(Array.from(document.querySelectorAll(".related-posts .blog-post-tile")));
  relatedItems = relatedItems.concat(Array.from(document.querySelectorAll(".related-resources .resource-tile")));
  if (relatedItems.length == 0) {
    let relatedPosts = document.querySelector(".related-posts");
    if (relatedPosts != null) { relatedPosts.classList.add("hidden") };
    let relatedResources = document.querySelector(".related-resources");
    if (relatedResources != null) { relatedResources.classList.add("hidden") };
  };

  // Enable popups
  let popups = document.querySelectorAll(".popup-content");
  for (p=0; p<popups.length; p++) {
    let popup = popups[p];
    popup.parentElement.classList.add("popup-hint");
    popup.parentElement.addEventListener("click", function() {
      if (Array.from(popup.classList).includes("hidden")) {
        // hide other popups
        Array.from(document.querySelectorAll(".popup-content")).forEach(function(el) {el.classList.add("hidden")})
        popup.classList.remove("hidden");
      } else {
        popup.classList.add("hidden");
      }
      console.log(popup);
    });
  };

});