import { getState, setPer } from "../src/state/hash.js";
import { setItemsPerPage, getItemsPerPage, DEFAULT_ITEMS_PER_PAGE } from "../src/state/prefs.js";

/**
 * Sync #items-per-page-dropdown with hash 'per' on load, and write back on change.
 * Also mirrors to localStorage via prefs module and emits 'qedit:prefs:updated' downstream.
 */
function bindPerFromHash() {
  const sel = /** @type {HTMLSelectElement|null} */ (
    document.getElementById("items-per-page-dropdown")
  );
  if (!sel) {
    return;
  }
  if (sel.dataset.hashInitialized === "1") {
    return;
  }
  sel.dataset.hashInitialized = "1";

  const { per } = getState();
  const initial = Number.isFinite(per) ? per : getItemsPerPage();
  const desired = Number.isFinite(initial) ? String(initial) : String(DEFAULT_ITEMS_PER_PAGE);
  const hasOption = Array.from(sel.options).some((o) => o.value === desired);
  if (hasOption) {
    sel.value = desired;
  }

  // Ensure prefs mirror in storage (no-op if same)
  setItemsPerPage(Number(sel.value));

  sel.addEventListener("change", () => {
    const v = Number(sel.value);
    setItemsPerPage(v); // persists + clamps
    setPer(v); // updates hash + emits qedit:hash:updated
  });
}

/**
 * Initialize hash bindings on DOM ready.
 */
export function initHash() {
  bindPerFromHash();
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => initHash(), { once: true });
} else {
  initHash();
}