var apx = apx || {};
apx.simplemobnav = {};
apx.simplemobnav.loadwco = (id, ctx) => {

  const tpldataname = `${apx.data.pagename}_${id}_simplemobnav`;
  const simplemobnavid = document.getElementById(id)
  console.log("load simplemobnav with tpldataname:", tpldataname, " id:", id, " ctx:", ctx);

  let initmenu;
  if (simplemobnavid.innerHTML.trim() === "") {
    // Get 1st menu matching the first profil in profilmenu
    apx.simplemobnav.checktpldataname(tpldataname);
    for (const menulist of apx.data.tpldata[tpldataname].profilmenu) {
      if (apx.data.headers.xprofils.includes(menulist.mainprofil)) {
        initmenu = menulist.link
        break;
      }
    }
    ctx.link = initmenu;
    apx.data.tpldata[tpldataname].contentscreen = initmenu;
    simplemobnavid.innerHTML = Mustache.render(
      apx.data.tpl.simplemobnavmain,
      apx.data.tpldata[tpldataname]
    );
  } else {
    //just update wco-link this will also run apx.{contentwconame}.loadwco()
    simplemobnavid.querySelectorAll('[wco-name]').forEach(elt => { elt.setAttribute('wco-link', ctx.link) });
  }
  // shom menulist from next
  const screendata = apx.data.tpldata[tpldataname].links.find(
    (m) => m.link == ctx.link
  );
  // add in menulink the data needed to customize
  const menulinks = apx.data.tpldata[tpldataname].links
    .filter(m =>
      screendata.next.includes(m.link) && m.allowedprofil.some(el => apx.data.headers.xprofils.includes(el)))
    .map(m => {
      const newm = { ...m }
      if (!m.classnavbutton && apx.data.tpldata[tpldataname].classnavbutton) {
        newm.classnavbutton = apx.data.tpldata[tpldataname].classnavbutton
      }
      if (!m.classnavlist && apx.data.tpldata[tpldataname].classnavlist) {
        newm.classnavlist = apx.data.tpldata[tpldataname].classnavlist
      }
      return newm
    })
  console.log("menulminks", menulinks);
  simplemobnavid.querySelector('.navlink').innerHTML = Mustache.render(
    apx.data.tpl[`simplemobnav${apx.data.tpldata[tpldataname].navtpl}`],
    { id, links: menulinks }
  );
  document.getElementById("loading").classList.add("hidden");
  console.log(`Request to show screen ${ctx.link}`);
};

apx.simplemobnav.action = (id, link, action, wconame) => {
  /**
   * Manage action per menu 
   * if navigation then it just propagate wco-link in all the wco-name component
   */
  if (action == "navigation") {
    document.getElementById(id).setAttribute("wco-link", link);
    /*document.getElementById(id).querySelectorAll("[wco-name]").forEach(lnk => {
      console.log("lnk:",lnk) 
      console.log(link)
      lnk.setAttribute('wco-link', link) 
      console.log(link,lnk)
       });*/
    return;
  }
  if (!apx[wconame]) {
    console.log(`%c⚠️ warning:%c this requested compoment ${wconame}} does not exist`);
  }
  if (!apx[wconame][action]) {
    console.log(`%c⚠️ warning:%c this function apx.${wconame}}.${action} does not exist`);
  }
  apx[wconame][action]();
}

apx.simplemobnav.reload = () => {
  location.reload();
}
apx.simplemobnav.checktpldataname = (tpldataname) => {
  /**
   * This is to help dev to build a correct json file
   */
  if (!apx.data.tpldata[tpldataname]) {
    console.log(`%c⚠️ warning:%c ${tpldataname} does not exist in localstorage tpldata `, 'color:red;')
    return false;
  }
  const mandatoryprop = ["contentwconame", "contentid", "profilmenu", "links"]
  let missingprop = ""
  mandatoryprop.forEach(p => {
    if (!apx.data.tpldata[tpldataname][p]) {
      missingprop += ` ${p}`
    }
  });
  if (missingprop !== "") {
    console.log(`%c⚠️ warning:%c Missing property(ies) in ${tpldataname}: ${missingprop} `, 'color:red;')
    return false
  }
};