function update_lock_state(id, lock) {
  if (id == "*") {
    all_item_element.forEach(function (item, index) {
      var parent_item = item.parentElement.parentElement;
      if (lock) {
        parent_item.classList.add("lock");
      } else {
        parent_item.classList.remove("lock");
      }
    });
  } else {
    let element = document.getElementById(id);
    if (lock) {
      element.classList.add("lock");
    } else {
      element.classList.remove("lock");
    }
  }
}

//Ajout des évents Listener
window.addEventListener("click", hide_context_menu);
window.addEventListener("visibilitychange", hide_context_menu);
window.addEventListener("blur", hide_context_menu);
window.addEventListener("scroll", hide_context_menu);
window.addEventListener("keydown", keydown);
window.addEventListener("contextmenu", show_context_menu);
// init variables globales
var tab_index = -1;
var all_item_element = document.querySelectorAll(
  ".context_menu .item .item-content:not(.have-sous-menu) a"
);
//init fonction
//si la souris bouge sur l'un des item du context menu, alors on passe en mode souris et on enregistre sa position
document.querySelectorAll(".context_menu .item").forEach((element) =>
  element.addEventListener("mousemove", function (event) {
    get_context_menu_element().setAttribute("data-navtype", "mouse");

    var temp_tab_index = parseInt(
      event.target.closest(".item").getAttribute("data-selectable-id")
    );
    if (Number.isInteger(temp_tab_index) == true) {
      tab_index = temp_tab_index;
    } else {
      //have-sous-menu
      if (event.target.classList.contains("have-sous-menu")) {
        temp_tab_index = parseInt(
          event.target.parentElement
            .querySelector(".item[data-selectable-id]")
            .getAttribute("data-selectable-id")
        );
        if (Number.isInteger(temp_tab_index) == true) {
          tab_index = temp_tab_index;
        }
      }
    }
    unselect_all();
    event.target.classList.add("selected");
  })
);

//on enregistre l'event de click sur chaque items et on leur ajoute un index
all_item_element.forEach(function (item, index) {
  var parent_item = item.parentElement.parentElement;

  parent_item.addEventListener("click", function (event) {
    event.preventDefault();
    item_context_menu_clicked(event.target);
  });
  parent_item.setAttribute("data-selectable-id", index);
});

function get_context_menu_element() {
  var context_menu = document.querySelector(".context_menu");
  return context_menu;
}

function context_menu_arrow_navigation(direction) {
  //fonction navigation au clavier
  do {
    // tant que l'item selectionné est lock alors on recommence
    if (
      get_context_menu_element().querySelectorAll(
        ".context_menu :not(.sous-menu) .item:not(.lock) .item-content:not(.have-sous-menu) a"
      ).length > 0
    ) {
      context_menu_arrow_navigation_main(direction);
    } else {
      return;
    }
  } while (
    all_item_element[tab_index].parentElement.parentElement.classList.contains(
      "lock"
    )
  );

  //main fonction
  function context_menu_arrow_navigation_main(direction) {
    //on defini le mode de navigation (pour gerer apres avec le CSS)
    if (get_context_menu_element().getAttribute("data-navtype") != "keyboard") {
      get_context_menu_element().setAttribute("data-navtype", "keyboard");
      if (tab_index != -1) {
        let curent_item_tab_index = get_context_menu_element().querySelector(
          '.item[data-selectable-id="' + tab_index + '"]'
        );
        if (
          curent_item_tab_index.parentElement.classList.contains("sous-menu") ==
          false
        ) {
          curent_item_tab_index.classList.add("selected");
        }
      }
    }

    if (Number.isInteger(tab_index) != true) {
      //si tab_index n'est pas un integer, alors on le redefini à sa valeur de base
      tab_index = -1;
    }

    if (tab_index != -1) {
      //si tab index n'as pas sa valeur par défaut alors :
      if (direction == "down") {
        if (
          all_item_element[tab_index]
            .closest(".item")
            .classList.contains("selected")
        ) {
          //si la direction est vers le bas alors on incrémente tab index
          tab_index = tab_index + 1;
          //si tab index depasse le nombre d'item alors on reboucle à 0
          if (tab_index > all_item_element.length - 1) {
            tab_index = 0;
          }
        }
      } else if (direction == "up") {
        if (
          all_item_element[tab_index]
            .closest(".item")
            .classList.contains("selected")
        ) {
          //si la direction est vers le haut alors on décrémente tab index
          tab_index = tab_index - 1;
          //si tab index depasse 0 alors on reboucle à à la fin
          if (tab_index < 0) {
            tab_index = all_item_element.length - 1;
          }
        }
      }
    } else {
      //on defini tab index si il n'avait pas encore de valeur
      tab_index = 0;
    }

    unselect_all();
    var item_selected = all_item_element[tab_index].closest(".item");
    item_selected.classList.add("selected");
    if (item_selected.parentElement.classList.contains("sous-menu")) {
      item_selected.parentElement.parentElement.classList.add("selected");
    }
    all_item_element[tab_index].focus();
  }
}

function unselect_all() {
  //on retire à tout les items le tag séléctionné
  document.querySelectorAll(".selected").forEach(function (selected_items) {
    selected_items.classList.remove("selected");
  });
}

function keydown(e) {
  //event en cas d'appuis de touches
  //on check si le context menu est affiché
  if (get_context_menu_element().style.display == "block") {
    //si echap alors on masque
    if (e.type == "keydown" && e.key === "Escape") {
      hide_context_menu(e);
    }
    //si fleche vers le bas alors on change l'item selectionné
    if (e.which === 40) {
      context_menu_arrow_navigation("down");
    }
    //si fleche vers le haut alors on change l'item selectionné
    if (e.which === 38) {
      context_menu_arrow_navigation("up");
    }
    //si tabulation alors on masque le context menu
    if (e.which === 9) {
      // Tabulation
      e.preventDefault();
      hide_context_menu(e);
    }
    //si enter, on valide la selection
    if (e.which === 13) {
      //Enter
      if (tab_index != -1) {
        e.preventDefault();
        item_context_menu_clicked(all_item_element[tab_index]);
      }
    }
  }
}
var x;

function hide_context_menu(e) {
  x = e;
  if (e !== null && e.type == "click") {
    //en cas de click droit et que ce n'est pas sur le menu lui-meme alors on le masque
    if (get_context_menu_element().contains(e.target)) {
      return false;
    }
  }
  //toute les exceptions on été traité, si la fonction est toujours ok alors on masque
  get_context_menu_element().style.display = "none";
}

var event;

function show_context_menu(e) {
  //on signale que l'event est traité par nous
  e.preventDefault();
  if (e.type == "contextmenu") {
    //en cas de click droit et que ce n'est pas sur le menu lui-meme alors on le masque
    if (get_context_menu_element().contains(e.target)) {
      return false;
    }
  }
  tab_index = -1;
  unselect_all();
  // on affiche le menu à ce niveau la pour pouvoir calculer ses dimensions
  var context_menu = get_context_menu_element();
  context_menu.style.display = "block";

  //recupération des éléments pour calculer la position du context menu
  var page_left_padding = 0;
  var page_bottom_padding = 0;

  function getScrollbarWidth() {
    // Creating invisible container
    const outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.overflow = "scroll";
    document.body.appendChild(outer);
    const inner = document.createElement("div");
    outer.appendChild(inner);
    page_left_padding = outer.offsetWidth - inner.offsetWidth;
    page_bottom_padding = outer.offsetHeight - inner.offsetHeight;
    outer.parentNode.removeChild(outer);
  }

  var page_width = window.innerWidth + window.pageXOffset - page_left_padding;
  var page_height =
    window.innerHeight + window.pageYOffset - page_bottom_padding;
  var menu_width = context_menu.getBoundingClientRect().width;
  var menu_height = context_menu.getBoundingClientRect().height;
  var click_position_left = e.pageX;
  var click_position_top = e.pageY;

  var menu_distance_right_border =
    page_width - (click_position_left + menu_width);
  var menu_distance_bottom_border =
    page_height - (click_position_top + menu_height);

  var final_menu_x = click_position_left;
  var final_menu_y = click_position_top;

  //si le context menu n'as pas la place de s'ouvrir, alors on décale sa position finale d'autant
  if (menu_distance_right_border < 0) {
    final_menu_x = final_menu_x + menu_distance_right_border;
  }
  if (menu_distance_bottom_border < 0) {
    final_menu_y = final_menu_y + menu_distance_bottom_border;
  }

  //on applique les coordonnées finales au style
  context_menu.style.left = final_menu_x + "px";
  context_menu.style.top = final_menu_y + "px";

  //on regarde si il y a la place pour ouvrir les sous-menu également
  var sous_menu_distance_right_border =
    page_width - (final_menu_x + menu_width * 2);

  if (sous_menu_distance_right_border < 0) {
    context_menu.classList.add("isleft");
    context_menu.classList.remove("isright");
  } else {
    context_menu.classList.add("isright");
    context_menu.classList.remove("isleft");
  }
}

function item_context_menu_clicked(item) {
  //si item lock, alors on ne le considère pas
  if (!item.closest(".item").classList.contains("lock")) {
    //on lance l'action
    let txt =
      "Vous avez cliqué sur : " +
      item.closest(".item").querySelector("a").innerText;
    console.log(txt);
    document.getElementById("action").innerText = txt;
    hide_context_menu(null);
  }
}

//update_lock_state("*", true);