import assert from "node:assert/strict";
import test from "node:test";
import { mount } from "./status.mjs";

function region(labels = {}) {
  const attributes = new Map(Object.entries({"data-state": "idle", ...labels}));
  let text = "";
  let writes = 0;
  return {
    getAttribute: name => attributes.get(name) ?? null,
    setAttribute: (name, value) => { attributes.set(name, value); writes++; },
    get textContent() { return text; },
    set textContent(value) { text = value; writes++; },
    set innerHTML(_) { throw new Error("HTML mutation"); },
    get writes() { return writes; },
  };
}

test("mount keeps one region and renders only supplied state text", () => {
  const element = region({"data-text-saved": "gespeichert", "data-text-saving": "guardando", "data-text-retrying": "再試行", "data-text-failed": "فشل"});
  const update = mount(element);
  for (const [state, text] of [["saving", "guardando"], ["retrying", "再試行"], ["failed", "فشل"], ["saved", "gespeichert"], ["idle", ""]]) {
    update(state);
    assert.equal(element.textContent, text);
    assert.equal(element.getAttribute("data-state"), state);
    const writes = element.writes;
    update(state);
    assert.equal(element.writes, writes);
  }
});

test("missing messages and unknown states are silent, never success", () => {
  const element = region({"data-text-saved": "saved fixture"});
  const update = mount(element);
  update("saved");
  for (const state of ["failed", "saving", "retrying", "__proto__", "constructor", "SAVED", null, {toString: () => "saved"}]) {
    update(state);
    assert.equal(element.textContent, "");
  }
});

test("status containing markup is assigned as text and labels stay stable", () => {
  const text = '<img src=x onerror="fixture()">';
  const element = region({"data-state": "failed", "data-text-failed": text});
  const update = mount(element);
  assert.equal(element.textContent, text);
  element.setAttribute("data-text-failed", "changed externally");
  update("idle");
  update("failed");
  assert.equal(element.textContent, text);
});