import { describe, it, expect, beforeEach } from "vitest";
import { initPrefs } from "../scripts/init-prefs.mjs";

function makeSelect(options = ["10", "25", "50", "100"]) {
  const sel = document.createElement("select");
  sel.id = "items-per-page-dropdown";
  for (const v of options) {
    const o = document.createElement("option");
    o.value = v;
    o.textContent = v;
    sel.appendChild(o);
  }
  document.body.appendChild(sel);
  return sel;
}

describe("init-prefs DOM binding", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
    localStorage.clear();
  });

  it("initializes select to default (25) when storage empty", () => {
    const sel = makeSelect();
    initPrefs();
    expect(sel.value).toBe("25");
  });

  it("respects stored value when option exists", () => {
    localStorage.setItem("qedit:itemsPerPage", "50");
    const sel = makeSelect();
    initPrefs();
    expect(sel.value).toBe("50");
  });

  it("writes back on change and emits event", () => {
    const sel = makeSelect();
    let seen = null;
    document.addEventListener(
      "qedit:prefs:updated",
      (e) => {
        seen = e.detail.itemsPerPage;
      },
      { once: true }
    );
    initPrefs();
    sel.value = "100";
    sel.dispatchEvent(new Event("change"));
    expect(localStorage.getItem("qedit:itemsPerPage")).toBe("100");
    expect(seen).toBe(100);
  });

  it("is idempotent (no double-binding)", () => {
    const sel = makeSelect();
    initPrefs();
    initPrefs();
    sel.value = "50";
    sel.dispatchEvent(new Event("change"));
    expect(localStorage.getItem("qedit:itemsPerPage")).toBe("50");
  });
});