class NavMenu{
    
    constructor(navigation, cursystem){
        this.navid = "main_navigation";

        let navEl = document.getElementById(this.navid);

        Array.from(navEl.getElementsByTagName("li")).forEach(function(itm){
          if(!itm.classList.contains("noremoveonrebuild")){
            itm.remove();
          }
          
        });
        Array.from(navEl.querySelectorAll(".divider")).forEach(function(itm){
          itm.remove();
        });

        if(!navigation[cursystem]){
          cursystem = "default";
        }

        if(navigation[cursystem]){

          navigation = navigation[cursystem]
          Object.keys(navigation).forEach(key=>{

            if(key !== "none"){
              navEl.innerHTML+=`<div class="divider no-translation nav-checkfor-nextelements mt-1 mb-1" data-tkey="${key}">{{${key}}}</div>`
            }
        
            Object.keys(navigation[key]).forEach(subKey=>{
              let skeyname = navigation[key][subKey].key;
              let destination = navigation[key][subKey].destination;
              let forceReload = navigation[key][subKey].forceReload;
              navEl.innerHTML+=`
                <li id="menuItem-li-${skeyname}" class="nav-checkrights divier-${key}" data-rightkey="${navigation[key][subKey].rightkey ?? ""}">
                  <a id="menuitem-${skeyname}" class="font-normal no-translation is-navigation-link" data-iconclasses="${navigation[key][subKey].img}" data-tkey="${destination}" data-destination="${destination}", data-forceReload="${forceReload}">
                    <i class="${navigation[key][subKey].img}"></i>
                    {{${skeyname}}}
                  </a>
                </li>
              `;
            });
          });
        }

        
      
        Array.from(document.getElementById(this.navid).querySelectorAll(".is-navigation-link")).forEach(function(item){
          
          item.onclick=function(){
            handleMenuItemClick(this);
          }
        });

        Array.from(document.getElementById(this.navid).querySelectorAll(".no-translation")).forEach(function(item){
            let icon = "";
            if(item.getAttribute("data-iconclasses") !== null){
                icon = `<i class="${item.getAttribute("data-iconclasses")}"></i> `;
            }

            item.innerHTML = icon + Translations[locale][item.getAttribute("data-tkey")];
            item.classList.remove("no-translation");

        });

    }

    setItemActive(item){
        Array.from(document.getElementById(this.navid).querySelectorAll(".bordered")).forEach(function(currentitem){
            currentitem.classList.remove("bordered");
        });
        item.parentElement.classList.add("bordered");

        setCurrentPageHeadLine(item.innerText);
    }

}