/* ==========================================================================
   Purinto GmbH — Projektfilter
   Filtert die Projektliste nach Branche und Verfahren. Beide Gruppen wirken
   gemeinsam (UND): "Medizintechnik" + "Bridge Tooling" zeigt nur Projekte,
   auf die beides zutrifft.

   Ohne JavaScript sind schlicht alle Projekte sichtbar — die Filterleiste
   wird dann gar nicht erst eingeblendet.
   ========================================================================== */

(function () {
  "use strict";

  var leiste = document.querySelector("[data-filter]");
  var liste = document.querySelector("[data-projektliste]");
  if (!leiste || !liste) return;

  var projekte = liste.querySelectorAll("[data-branche]");
  var leerHinweis = document.querySelector("[data-leer]");
  var zaehler = document.querySelector("[data-zaehler]");

  // Filterleiste ist nur mit JS sinnvoll, deshalb erst jetzt einblenden.
  leiste.hidden = false;

  var auswahl = { branche: "alle", verfahren: "alle" };

  function passt(projekt) {
    if (
      auswahl.branche !== "alle" &&
      projekt.getAttribute("data-branche") !== auswahl.branche
    ) {
      return false;
    }

    if (auswahl.verfahren !== "alle") {
      var verfahren = (projekt.getAttribute("data-verfahren") || "").split(/\s+/);
      if (verfahren.indexOf(auswahl.verfahren) === -1) return false;
    }

    return true;
  }

  function anwenden() {
    var sichtbar = 0;

    Array.prototype.forEach.call(projekte, function (projekt) {
      var zeigen = passt(projekt);
      projekt.classList.toggle("ist-versteckt", !zeigen);
      if (zeigen) sichtbar++;
    });

    if (leerHinweis) leerHinweis.hidden = sichtbar > 0;

    if (zaehler) {
      zaehler.textContent =
        sichtbar === 1 ? "1 Projekt" : sichtbar + " Projekte";
    }
  }

  leiste.addEventListener("click", function (e) {
    var knopf = e.target.closest("[data-gruppe]");
    if (!knopf) return;

    var gruppe = knopf.getAttribute("data-gruppe");
    auswahl[gruppe] = knopf.getAttribute("data-wert");

    // Gedrückten Zustand innerhalb der Gruppe umsetzen
    var geschwister = leiste.querySelectorAll(
      '[data-gruppe="' + gruppe + '"]'
    );
    Array.prototype.forEach.call(geschwister, function (el) {
      el.setAttribute("aria-pressed", String(el === knopf));
    });

    anwenden();
  });

  anwenden();
})();