import { test, expect } from "bun:test";
import { Window } from "happy-dom";
import { REACTIVE_RUNTIME } from "../src/reactive-runtime.ts";

function fixture(panel: Record<string, number>, clipped = false) {
  const win = new Window();
  win.document.body.innerHTML =
    '<div id="clip"><div data-ui-component="ComboBox"><div data-wrn-anchored></div></div></div>';
  const element = win.document.querySelector("[data-wrn-anchored]")! as any;
  const host = element.parentElement;
  const rect = (left: number, top: number, width: number, height: number) => ({
    left,
    top,
    width,
    height,
    right: left + width,
    bottom: top + height,
  });
  host.getBoundingClientRect = () => rect(270, 170, 40, 30);
  element.getBoundingClientRect = () =>
    rect(
      panel.left,
      panel.top,
      Math.min(panel.width, parseFloat(element.style.maxWidth) || Infinity),
      Math.min(panel.height, parseFloat(element.style.maxHeight) || Infinity),
    );
  if (clipped) {
    const clip = win.document.querySelector("#clip")! as any;
    clip.style.overflow = "hidden";
    clip.getBoundingClientRect = () => rect(100, 50, 220, 220);
    Object.defineProperty(clip, "clientWidth", { value: 220 });
    Object.defineProperty(clip, "clientHeight", { value: 220 });
  }
  const start = REACTIVE_RUNTIME.indexOf("  function isRenderedElement(");
  const end = REACTIVE_RUNTIME.indexOf("  function repositionAnchored(", start);
  const clamp = new Function(
    "window",
    "document",
    "ANCHOR_MARGIN",
    REACTIVE_RUNTIME.slice(start, end) + "; return clampAnchored;",
  )(win, win.document, 8);
  return { win, element, clamp };
}

test("anchored panels fit clipping containers and positioning does not drift", async () => {
  const { win, element, clamp } = fixture({ left: 40, top: 208, width: 180, height: 100 }, true);
  clamp(element);
  expect(element.style.translate).toBe("68px -146px");
  clamp(element);
  expect(element.style.translate).toBe("68px -146px");
  await win.happyDOM.close();
});

test("oversized panels become scrollable and recover authored sizing when space returns", async () => {
  const { win, element, clamp } = fixture({ left: 40, top: 60, width: 500, height: 400 }, true);
  element.style.minWidth = "300px";
  clamp(element);
  expect(element.style.maxWidth).toBe("204px");
  expect(element.style.maxHeight).toBe("204px");
  expect(element.style.overflow).toBe("auto");
  element.parentElement.parentElement.style.overflow = "visible";
  clamp(element);
  expect(element.style.minWidth).toBe("300px");
  expect(element.style.maxWidth).toBe("");
  await win.happyDOM.close();
});