"use strict";

const test = require("node:test");
const assert = require("node:assert/strict");

function fakeElement({ width = 320, height = 120 } = {}) {
  return {
    className: "rw-cmap-item",
    style: {},
    dataset: {},
    firstElementChild: { style: {} },
    innerHTML: "",
    querySelector: () => null,
    querySelectorAll: () => [],
    getBoundingClientRect: () => ({ width, height }),
    remove() {},
    addEventListener() {},
    classList: { add() {}, remove() {}, toggle() {} },
    setAttribute() {},
    removeAttribute() {}
  };
}

async function loadEditorFactory() {
  global.Element = class Element {};
  global.document = {
    currentScript: null,
    styleSheets: [],
    body: { append() {} },
    createElement: () => fakeElement()
  };
  global.window = {};
  await import("../static/js/cmap/cmap-racket-wiki.js");
  return global.window.RacketWikiCmap;
}

test("automatic render sizing advances only an unchanged saved baseline", async () => {
  const factory = await loadEditorFactory();
  const canvas = {
    addEventListener() {},
    querySelector: () => null,
    clientWidth: 1200,
    clientHeight: 800,
    scrollLeft: 0,
    scrollTop: 0
  };
  const map = { onSelection() {}, onActivation() {} };
  let savedBaseline = null;
  let notification = null;
  const editor = factory.createEditor(canvas, {
    createDiagramEngine: () => map,
    onAutomaticLayoutChange: (change) => {
      notification = change;
      if (savedBaseline === change.beforeSnapshot) {
        savedBaseline = change.afterSnapshot;
      }
    }
  });

  const attributes = { x: 10, y: 20, width: 220, height: 70 };
  const node = {
    attr(value) {
      if (typeof value === "string") return attributes[value];
      Object.assign(attributes, value);
      return this;
    },
    redraw() {},
    element: () => null
  };
  const record = {
    id: 1,
    conceptId: "global-concept",
    kind: "concept",
    label: "Concept",
    synopsis: "Long content",
    aspects: [],
    tags: [],
    descriptionPageSlug: null,
    pageSlug: null,
    cmapSlug: null,
    imageSource: "",
    parentCmapLink: false,
    groupId: null,
    childMap: null,
    parentSubmap: null,
    submapDepth: 0,
    expanded: false,
    submapInitialized: false,
    separateMap: false,
    mapReference: null,
    hiddenContexts: new Set(),
    layouts: {},
    backgroundColor: "#fff",
    borderColor: "#000",
    submapBackgroundColor: "#fff",
    submapBorderColor: "#000",
    textColor: "#222",
    fontFamily: "Arial",
    fontSize: "11pt",
    fontWeight: "normal",
    fontStyle: "normal",
    synopsisTextColor: "#222",
    synopsisFontFamily: "Arial",
    synopsisFontSize: "11pt",
    synopsisFontWeight: "normal",
    synopsisFontStyle: "normal",
    width: 220,
    height: 70,
    autoWidth: false,
    autoHeight: false,
    fitContentPending: false,
    node
  };
  editor.items.push(record);
  savedBaseline = editor.historySnapshot();

  editor.fitItemToContent(record, fakeElement());

  assert.ok(notification, "automatic sizing reports its exact before and after snapshots");
  assert.notEqual(notification.beforeSnapshot, notification.afterSnapshot);
  assert.equal(savedBaseline, notification.afterSnapshot,
    "an untouched baseline follows renderer-only normalization");

  const editedBaseline = "user-edited-state";
  savedBaseline = editedBaseline;
  record.height = 70;
  attributes.height = 70;
  editor.fitItemToContent(record, fakeElement({ height: 140 }));
  assert.equal(savedBaseline, editedBaseline,
    "automatic sizing never hides a different user-edited baseline");
});