filter.astro

---
interface FilterSessionsProps {
  allTracks?: string[];
  allTypes?: string[];
  allLevels?: string[];
}

const { allTracks = [], allTypes = [], allLevels = [] }: FilterSessionsProps = Astro.props;
import { Label } from "../form/label";
import { Select } from "../form/select";
---

<form class="mb-12 filter-sessions">
  <div class="w-full mb-6">
    <Label htmlFor="search">Search</Label>
    <input
      type="text"
      id="search"
      name="search"
      class="block w-full bg-transparent text-lg h-16 py-2 pr-16 pl-4 border-[3px] border-primary appearance-none focus:outline-none focus:border-black focus-visible:bg-white"
      placeholder="Search sessions..."
    />
  </div>

  <div class="flex flex-wrap gap-x-4 gap-y-4 mb-6">
    {allTracks.length > 0 && (
      <div>
        <Label htmlFor="track">Track</Label>
        <Select id="track" name="track">
          <option value="">All</option>
          {allTracks.map((track: string) => (
            <option value={track}>{track}</option>
          ))}
        </Select>
      </div>
    )}

    {allTypes.length > 0 && (
      <div>
        <Label htmlFor="type">Session type</Label>
        <Select id="type" name="type">
          <option value="">All</option>
          {allTypes.map((type: string) => (
            <option value={type}>{type}</option>
          ))}
        </Select>
      </div>
    )}

    {allLevels.length > 0 && (
      <div>
        <Label htmlFor="level">Level</Label>
        <Select id="level" name="level">
          <option value="">All</option>
          {allLevels.map((level: string) => (
            <option value={level}>{level}</option>
          ))}
        </Select>
      </div>
    )}
  </div>

  <button
    type="button"
    id="reset-filters"
    class="btn underline font-bold hover:text-primary-hover"
  >
    Reset Filters
  </button>
</form>

<!-- Results info -->
<div id="results-info" class="mb-6 text-lg font-medium"></div>

<script>
  interface FilterParams {
    track: string;
    type: string;
    level: string;
    search: string;
  }

  document.addEventListener("DOMContentLoaded", () => {
    const forms = document.querySelectorAll<HTMLFormElement>("form.filter-sessions");
    const resultsInfo = document.getElementById("results-info");

    function getUrlParams(): FilterParams {
      const params = new URLSearchParams(window.location.search);
      return {
        track: params.get("track") || "",
        type: params.get("type") || "",
        level: params.get("level") || "",
        search: params.get("search") || "",
      };
    }

    function setSelectValues(): void {
      const { track, type, level, search } = getUrlParams();

      forms.forEach((form) => {
        const trackSelect = form.querySelector<HTMLSelectElement>("#track");
        const typeSelect = form.querySelector<HTMLSelectElement>("#type");
        const levelSelect = form.querySelector<HTMLSelectElement>("#level");
        const searchInput = form.querySelector<HTMLInputElement>("#search");

        if (trackSelect) trackSelect.value = track;
        if (typeSelect) typeSelect.value = type;
        if (levelSelect) levelSelect.value = level;
        if (searchInput) searchInput.value = search;
      });
    }

    function updateUrlParams(track: string, type: string, level: string, search: string): void {
      const params = new URLSearchParams();

      if (track) params.set("track", track);
      if (type) params.set("type", type);
      if (level) params.set("level", level);
      if (search) params.set("search", search);

      const queryString = params.toString();
      const newUrl = queryString
        ? `${window.location.pathname}?${queryString}`
        : window.location.pathname;
      window.history.pushState({}, "", newUrl);
    }

    function filterSessions(): void {
      forms.forEach((form) => {
        const trackSelect = form.querySelector<HTMLSelectElement>("#track");
        const typeSelect = form.querySelector<HTMLSelectElement>("#type");
        const levelSelect = form.querySelector<HTMLSelectElement>("#level");
        const searchInput = form.querySelector<HTMLInputElement>("#search");

        const track = trackSelect?.value || "";
        const type = typeSelect?.value || "";
        const level = levelSelect?.value || "";
        const search = searchInput?.value.trim().toLowerCase() || "";

        updateUrlParams(track, type, level, search);

        const sessionItems = document.querySelectorAll<HTMLLIElement>("ol.sessions > li");

        sessionItems.forEach((session) => {
          const sessionTrack = session.getAttribute("data-track") || "";
          const sessionType = session.getAttribute("data-type") || "";
          const sessionLevel = session.getAttribute("data-level") || "";
          const sessionText = session.textContent?.toLowerCase() || "";

          const trackMatch = track === "" || sessionTrack === track;
          const typeMatch = type === "" || sessionType === type;
          const levelMatch = level === "" || sessionLevel === level;
          const searchMatch = search === "" || sessionText.includes(search);

          session.style.display =
            trackMatch && typeMatch && levelMatch && searchMatch ? "block" : "none";
        });

        const trackGroups = document.querySelectorAll<HTMLDivElement>("div.track-group");

        trackGroups.forEach((group) => {
          const visibleSessions = group.querySelectorAll(
            "ol.sessions > li:not([style*='display: none'])"
          ).length;

          group.style.display = visibleSessions > 0 ? "block" : "none";
        });

        const visibleCount = document.querySelectorAll(
          "ol.sessions > li:not([style*='display: none'])"
        ).length;

        if (resultsInfo) {
          resultsInfo.textContent = visibleCount > 0
            ? `${visibleCount} result${visibleCount === 1 ? "" : "s"} found.`
            : "No results found.";
        }
      });
    }

    function applyFiltersFromUrl(): void {
      setSelectValues();
      filterSessions();
    }

    forms.forEach((form) => {
      const selectElements = form.querySelectorAll<HTMLSelectElement>("select");

      selectElements.forEach((select) => {
        select.addEventListener("change", filterSessions);
      });

      const searchInput = form.querySelector<HTMLInputElement>("#search");
      if (searchInput) {
        searchInput.addEventListener("input", filterSessions);
      }

      const resetButton = form.querySelector<HTMLButtonElement>("#reset-filters");
      if (resetButton) {
        resetButton.addEventListener("click", () => {
          selectElements.forEach((select) => {
            select.value = "";
          });

          if (searchInput) searchInput.value = "";
          filterSessions();
        });
      }
    });

    applyFiltersFromUrl();
  });
</script>