// @vitest-environment happy-dom
import { beforeAll, beforeEach, describe, expect, it } from "vitest";

import {
  createPaletteSelect,
  initTheme,
  PALETTES,
  resolvedPalette,
  setPalette,
} from "./theme.js";

// happy-dom's vitest environment ships no localStorage global; back it with a
// plain in-memory map so persistence is observable.
let store = new Map<string, string>();
beforeAll(() => {
  Object.defineProperty(window, "localStorage", {
    value: {
      getItem: (k: string) => store.get(k) ?? null,
      setItem: (k: string, v: string) => store.set(k, v),
      removeItem: (k: string) => store.delete(k),
    },
  });
});

describe("palette selection", () => {
  beforeEach(() => {
    store = new Map();
    delete document.documentElement.dataset.palette;
    delete document.documentElement.dataset.theme;
  });

  it("defaults to graphite with no data-palette attribute", () => {
    initTheme();
    expect(resolvedPalette()).toBe("graphite");
    expect(document.documentElement.dataset.palette).toBeUndefined();
  });

  it("setPalette stamps data-palette and persists", () => {
    setPalette("ember");
    expect(document.documentElement.dataset.palette).toBe("ember");
    expect(resolvedPalette()).toBe("ember");

    // A fresh boot re-applies the stored palette.
    delete document.documentElement.dataset.palette;
    initTheme();
    expect(document.documentElement.dataset.palette).toBe("ember");
  });

  it("selecting graphite removes the attribute again", () => {
    setPalette("orchid");
    setPalette("graphite");
    expect(document.documentElement.dataset.palette).toBeUndefined();
    initTheme();
    expect(document.documentElement.dataset.palette).toBeUndefined();
  });

  it("ignores an unknown stored palette", () => {
    localStorage.setItem("maestro-palette", "glorb");
    initTheme();
    expect(resolvedPalette()).toBe("graphite");
    expect(document.documentElement.dataset.palette).toBeUndefined();
  });

  it("the picker lists every palette and applies the chosen one", () => {
    const select = createPaletteSelect();
    expect([...select.options].map((o) => o.value)).toEqual([...PALETTES]);
    expect(select.value).toBe("graphite");

    select.value = "periwinkle";
    select.dispatchEvent(new Event("change"));
    expect(document.documentElement.dataset.palette).toBe("periwinkle");
    expect(localStorage.getItem("maestro-palette")).toBe("periwinkle");
  });
});