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

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

allProjects.forEach((currentProject) => {
  currentProject.querySelector("button").addEventListener("click", () => {
    allProjects.forEach((project) => {
      if (project !== currentProject) {
        project.classList.remove("selected");
      }
    });

    currentProject
      .querySelectorAll(".project-slideshow > .slide")
      .forEach((slide) => slide.classList.remove("active"));
    currentProject
      .querySelector(".project-slideshow > .slide")
      .classList.add("active");
    currentProject.classList.toggle("selected");

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

const closeAllProjects = document.querySelectorAll(".closer");
closeAllProjects.forEach((closeProject) => {
  closeProject.addEventListener("click", () => {
    allProjects.forEach((p) => {
      p.classList.remove("selected");
    });
  });
});

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

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