import { getScene, getCategory } from "../api";

// Function to add a navbar to the destination object

async function loadNavbar(scene_id, destination) {
    getScene(scene_id).then((scene) => {
      getCategory(scene.obj.category).then((category) => {
        var nav = document.createElement("nav");
        nav.setAttribute("class", "navbar navbar-expand-lg navbar-dark bg-dark");
        nav.setAttribute("id", "sceneNavbar");
  
        var container = document.createElement("div");
        container.setAttribute("class", "container-fluid");
  
        var dropdown = document.createElement("div");
        dropdown.setAttribute("class", "dropdown");
  
        var sceneSelector = document.createElement("button");
        sceneSelector.setAttribute("class", "btn btn-secondary dropdown-toggle");
        sceneSelector.setAttribute("type", "button");
        sceneSelector.setAttribute("id", "sceneSelector");
        sceneSelector.setAttribute("data-bs-toggle", "dropdown");
        sceneSelector.setAttribute("aria-expanded", "true");
        sceneSelector.textContent = "Select Scene";
  
        var dropdownMenu = document.createElement("ul");
        dropdownMenu.setAttribute("class", "dropdown-menu show");
        dropdownMenu.setAttribute("aria-labelledby", "sceneSelector");
        console.log(dropdownMenu);
  
        category.obj.scenes.forEach((scene) => {
          console.log(scene);
          var sceneLink = document.createElement("a");
          sceneLink.setAttribute("class", "dropdown-item");
          sceneLink.setAttribute("href", "#");
          sceneLink.textContent = scene.title;
          sceneLink.addEventListener("click", function () {
            loadScene(scene.id, -1, -1, -1, destination);
          });
  
          dropdownMenu.appendChild(sceneLink);
        });
  
        var sceneTitle = document.createElement("a");
        sceneTitle.setAttribute("class", "navbar-brand");
        sceneTitle.setAttribute("href", "#");
        sceneTitle.setAttribute("id", "sceneTitle");
        sceneTitle.textContent = scene.obj.title;
  
        dropdown.appendChild(sceneSelector);
        dropdown.appendChild(dropdownMenu);
        console.log(dropdownMenu);
  
        container.appendChild(dropdown);
        container.appendChild(sceneTitle);
  
        nav.appendChild(container);
  
        destination.prepend(nav);
      });
    });
  }

  export { loadNavbar };