const filterButtons = document.querySelectorAll(".filter-menu button");
const projectItems = document.querySelectorAll(".projects-index li.project");

function applyFilter(filter) {
  filterButtons.forEach((b) => b.classList.remove("active"));
  if (!filter) {
    projectItems.forEach((item) => item.classList.remove("filtered-out"));
    return;
  }
  const btn = [...filterButtons].find((b) => b.dataset.filter === filter);
  if (btn) btn.classList.add("active");
  projectItems.forEach((item) => {
    item.classList.toggle("filtered-out", item.dataset.category !== filter);
    item.classList.remove("selected", "unselected");
  });
}

filterButtons.forEach((btn) => {
  btn.addEventListener("click", () => {
    const isActive = btn.classList.contains("active");
    const newFilter = isActive ? null : btn.dataset.filter;
    applyFilter(newFilter);
    Router.setParam("filter", newFilter);
  });
});

window.addEventListener("routechange", () =>
  applyFilter(Router.getParam("filter")),
);

applyFilter(Router.getParam("filter"));