function setMenuCurrentPage(input) {
  const url = new URL(window.location);
  url.searchParams.set("module", input);
  window.history.pushState({}, "", url);
}

function getQueryParameters() {
  let queryString = location.search.slice(1),
    params = {};

  queryString.replace(/([^=]*)=([^&]*)&*/g, (_, key, value) => {
    params[key] = value;
  });

  return params;
}

window.onload = function () {
  let stateMenu = getQueryParameters();
  goTo("undefined");
  goTo(stateMenu.module);
};

function goTo(input) {
  setMenuCurrentPage(input);
  var settingButtonItem = document.getElementById("settings-button");
  var eventListingsMenuItem = document.getElementById("event-listings");
  var menuFilterItem = document.getElementById("menu-filters");
  var customEventItem = document.getElementById("custom-event");

  if (input == "undefined") {
    settingButtonItem.classList.add("dispevli-menu-item-active");
    eventListingsMenuItem.classList.remove("dispevli-menu-item-active");
    menuFilterItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.remove("dispevli-menu-item-active");
    settingButtonItem.classList.add("dispevli-menu-item-active");
    eventListingsMenuItem.classList.remove("dispevli-menu-item-active");
    menuFilterItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.remove("dispevli-menu-item-active");
    document.getElementById("settings-container").style.display = "block";
    document.getElementById("event-listing-container").style.display = "none";
    document.getElementById("filters-container").style.display = "none";
    document.getElementById("color-selection-setup").style.display = "none";
  }

  if (input == "settings") {
    settingButtonItem.classList.add("dispevli-menu-item-active");
    eventListingsMenuItem.classList.remove("dispevli-menu-item-active");
    menuFilterItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.remove("dispevli-menu-item-active");
    document.getElementById("settings-container").style.display = "block";
    document.getElementById("event-listing-container").style.display = "none";
    document.getElementById("filters-container").style.display = "none";
    document.getElementById("color-selection-setup").style.display = "none";
  }

  if (input == "event-listings") {
    settingButtonItem.classList.remove("dispevli-menu-item-active");
    menuFilterItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.remove("dispevli-menu-item-active");
    eventListingsMenuItem.classList.add("dispevli-menu-item-active");
    document.getElementById("settings-container").style.display = "none";
    document.getElementById("event-listing-container").style.display = "block";
    document.getElementById("filters-container").style.display = "none";
    document.getElementById("color-selection-setup").style.display = "none";
  }

  if (input == "menu-filters") {
    menuFilterItem.classList.add("dispevli-menu-item-active");
    settingButtonItem.classList.remove("dispevli-menu-item-active");
    eventListingsMenuItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.remove("dispevli-menu-item-active");
    document.getElementById("settings-container").style.display = "none";
    document.getElementById("event-listing-container").style.display = "none";
    document.getElementById("filters-container").style.display = "block";
    document.getElementById("color-selection-setup").style.display = "none";
  }

  if (input == "custom-event") {
    settingButtonItem.classList.remove("dispevli-menu-item-active");
    eventListingsMenuItem.classList.remove("dispevli-menu-item-active");
    menuFilterItem.classList.remove("dispevli-menu-item-active");
    customEventItem.classList.add("dispevli-menu-item-active");
    document.getElementById("settings-container").style.display = "none";
    document.getElementById("event-listing-container").style.display = "none";
    document.getElementById("filters-container").style.display = "none";
    document.getElementById("color-selection-setup").style.display = "block";
  }
}
