gallery_server_client_s190js/public/js/optionsSheet.js

// OPTIONS SHEET — Ordinamento, raggruppamento e filtri.
document.addEventListener("DOMContentLoaded", () => {
  const optionsSheet = document.getElementById("optionsSheet");
  const sheetOverlay = document.getElementById("sheetOverlay");
  const optionsBtn = document.getElementById("optionsBtn");

  if (!optionsSheet || !sheetOverlay || !optionsBtn) {
    console.warn("[optionsSheet] Elementi del pannello non trovati.");
    return;
  }

  const searchInput = document.getElementById("gallerySearch");
  const yearSelect = document.getElementById("galleryYear");
  const monthSelect = document.getElementById("galleryMonth");
  const folderSelect = document.getElementById("galleryFolder");

  function isPhotoMode() {
    return window.state?.mode === "photos";
  }

  function updateSheetVisibility() {
    optionsSheet.querySelectorAll("[data-photo-filter], [data-filter]")
      .forEach((element) => {
        element.style.display =
          isPhotoMode() ? "" : "none";
      });
  }

  function populateYears(serverYears = null) {
    if (!yearSelect) return;

    const previous = yearSelect.value;
    const years = new Set();

    if (Array.isArray(serverYears)) {
      for (const value of serverYears) {
        const year = Number(value);
        if (Number.isInteger(year) && year >= 1000 && year <= 9999) {
          years.add(year);
        }
      }
    } else {
      const items = window.getLocalItems?.() || [];
      for (const item of items) {
        if (!item?.taken_at) continue;
        const date = new Date(item.taken_at);
        if (!Number.isNaN(date.getTime())) years.add(date.getFullYear());
      }
    }

    yearSelect.replaceChildren();

    const all = document.createElement("option");
    all.value = "";
    all.textContent = "Tutti gli anni";
    yearSelect.appendChild(all);

    [...years].sort((a, b) => b - a).forEach(year => {
      const option = document.createElement("option");
      option.value = String(year);
      option.textContent = String(year);
      yearSelect.appendChild(option);
    });

    yearSelect.value = years.has(Number(previous)) ? previous : "";
  }
  function populateFolders(serverFolders = null) {
    if (!folderSelect) return;

    const previous = window.currentFolder || "";
    const folders = new Set();

    if (Array.isArray(serverFolders)) {
      for (const value of serverFolders) {
        const folder = String(value || "").trim();
        if (folder) folders.add(folder);
      }
    } else {
      const items = window.getLocalItems?.() || [];
      for (const item of items) {
        const folder = String(item?.cartella || item?.folder || "").trim();
        if (folder) folders.add(folder);
      }
    }

    folderSelect.replaceChildren();

    const all = document.createElement("option");
    all.value = "";
    all.textContent = "Tutte le cartelle";
    folderSelect.appendChild(all);

    [...folders].sort((a, b) =>
      a.localeCompare(b, "it", { sensitivity: "base" })
    ).forEach(folder => {
      const option = document.createElement("option");
      option.value = folder;
      option.textContent = folder;
      folderSelect.appendChild(option);
    });

    folderSelect.value = folders.has(previous) ? previous : "";
    if (previous && !folders.has(previous)) window.currentFolder = "";
  }
  async function openOptionsSheet() {
    updateSheetVisibility();

    let serverOptions = null;
    if (isPhotoMode()) {
      try {
        const token = localStorage.getItem("token");
        const showDeleted =
          document.getElementById("showDeleted")?.checked ? "1" : "0";

        const response = await fetch(
          `/photos/gallery/options?showDeleted=${showDeleted}`,
          { headers: { Authorization: "Bearer " + token } }
        );

        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        serverOptions = await response.json();
      } catch (error) {
        console.error("[optionsSheet] errore opzioni server:", error);
      }
    }

    populateYears(
      Array.isArray(serverOptions?.years) ? serverOptions.years : null
    );
    populateFolders(
      Array.isArray(serverOptions?.folders) ? serverOptions.folders : null
    );

    if (searchInput) {
      searchInput.value = window.currentSearch || "";
    }
    if (yearSelect) {
      yearSelect.value = window.currentYear || "";
    }
    if (monthSelect) {
      monthSelect.value = window.currentMonth || "";
    }
    if (folderSelect) {
      folderSelect.value = window.currentFolder || "";
    }

    optionsSheet.classList.add("open");
    sheetOverlay.classList.add("open");
  }

  function closeOptionsSheet() {
    optionsSheet.classList.remove("open");
    sheetOverlay.classList.remove("open");
  }

  function resetFilters() {
    window.currentFilter = "";
    window.currentSearch = "";
    window.currentYear = "";
    window.currentMonth = "";
    window.currentFolder = "";

    if (searchInput) searchInput.value = "";
    if (yearSelect) yearSelect.value = "";
    if (monthSelect) monthSelect.value = "";
    if (folderSelect) folderSelect.value = "";

    refreshGallery();
  }

  optionsSheet.addEventListener("click", (event) => {
    const btn = event.target.closest(".sheet-btn");
    if (!btn) return;

    if (btn.hasAttribute("data-reset-filters")) {
      resetFilters();
      closeOptionsSheet();
      return;
    }

    const sort = btn.dataset.sort;
    const group = btn.dataset.group;
    const filter = btn.dataset.filter;

    if (sort) window.currentSort = sort;
    if (group) window.currentGroup = group;

    if (filter !== undefined && isPhotoMode()) {
      window.currentFilter = filter;
    }

    refreshGallery();
    closeOptionsSheet();
  });

  function updateSearchAndDate() {
    if (!isPhotoMode()) return;

    window.currentSearch = searchInput?.value?.trim() || "";
    window.currentYear = yearSelect?.value || "";
    window.currentMonth = monthSelect?.value || "";
    window.currentFolder = folderSelect?.value || "";

    refreshGallery();
  }

  // La ricerca viene applicata mentre si digita.
  searchInput?.addEventListener("input", updateSearchAndDate);
  yearSelect?.addEventListener("change", updateSearchAndDate);
  monthSelect?.addEventListener("change", updateSearchAndDate);
  folderSelect?.addEventListener("change", updateSearchAndDate);

  sheetOverlay.addEventListener("click", closeOptionsSheet);
  optionsBtn.addEventListener("click", openOptionsSheet);

  updateSheetVisibility();

  window.openOptionsSheet = openOptionsSheet;
  window.closeOptionsSheet = closeOptionsSheet;
});