const allProjects = document.querySelectorAll(".projects-index li.project");

function selectProject(slug) {
  if (!slug) {
    allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
    return;
  }
  const target = [...allProjects].find((p) => p.dataset.slug === slug);
  if (!target) return;
  allProjects.forEach((p) => {
    p.classList.add("unselected");
    p.classList.remove("selected");
  });
  target.classList.add("selected");
  target.classList.remove("unselected");
}

allProjects.forEach((project) => {
  project.querySelector("button").addEventListener("click", () => {
    allProjects.forEach((p) => {
      p.classList.add("unselected");
      p.classList.remove("selected");
    });

    project.classList.add("selected");
    project.classList.remove("unselected");

    Router.setParam("project", project.dataset.slug);
  });
});

// const toggleProjects = document.querySelectorAll(".project-toggler");

// toggleProjects.forEach((button) => {
//   button.addEventListener("click", (event) => {
//     const parentLi = button.closest("li");
//     if (parentLi.classList.contains("selected")) {
//       event.stopPropagation();
//       allProjects.forEach((p) => p.classList.remove("unselected"));
//       parentLi.classList.remove("selected");
//       Router.setParam("project", null);
//     }
//   });
// });

const closeAllProjects = document.querySelectorAll(".all-projects-closer");
closeAllProjects.forEach((closeProject) => {
  closeProject.addEventListener("click", () => {
    window.location = "/index";
  });
});

window.addEventListener("routechange", () =>
  selectProject(Router.getParam("project"))
);

selectProject(Router.getParam("project"));