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

// Function to add a sidebar to the destination object

async function loadSidebar(scene_id, destination) {
  getScene(scene_id).then((scene) => {
    getCategory(scene.obj.category).then((category) => {
      var sidebar = document.createElement("div");
      sidebar.setAttribute("class", "collapse show");
      sidebar.setAttribute("id", "sceneSidebar");

      var p = document.createElement("div");
      p.setAttribute("class", "p-4");

      var h5 = document.createElement("h5");
      h5.setAttribute("class", "font-weight-bold");
      h5.textContent = "Scenes";

      var ul = document.createElement("ul");
      ul.setAttribute("class", "nav flex-column");

      category.obj.scenes.forEach((scene) => {
        var li = document.createElement("li");
        li.setAttribute("class", "nav-item");

        var a = document.createElement("a");
        a.setAttribute("href", "#");
        a.setAttribute("class", "nav-link");
        a.textContent = scene.title;
        a.addEventListener("click", function () {
          loadScene(scene.id, -1, -1, -1, destination);
        });

        li.appendChild(a);
        ul.appendChild(li);
      });

      p.appendChild(h5);
      p.appendChild(ul);

      var button = document.createElement("button");
      button.setAttribute("class", "btn-close-sidebar");
      button.setAttribute("type", "button");
      button.setAttribute("id", "btnCloseSidebar");
      button.textContent = "Close Sidebar";

      button.addEventListener("click", function () {
        toggleSidebar();
      });

      sidebar.appendChild(button); // TODO: Make it prettier before enabling.
      sidebar.appendChild(p);

      var reopenButton = document.createElement("button");
      reopenButton.setAttribute("class", "btn-open-sidebar hide");
      reopenButton.textContent = "Open Sidebar";
      reopenButton.addEventListener("click", function () {
        toggleSidebar();
      });

      destination.prepend(reopenButton);

      destination.prepend(sidebar);
    });
  });
}

function toggleSidebar() {
  const sidebar = document.getElementById("sceneSidebar");
  const reopenButton = document.querySelector(".btn-open-sidebar");

  if (!sidebar.classList.contains("show")) {
    sidebar.classList.add("show");
    reopenButton.classList.add("hide");
  } else {
    sidebar.classList.remove("show");
    reopenButton.classList.remove("hide");
  }
}

export { loadSidebar, toggleSidebar };