/* 236-1 — 표 아래 안내 글이 한 줄일 때 창 끝까지 셈(`ui_template_data_table.ts` fillViewport)이
 * 창 크기마다 문서 맨 아래 = 창 끝(페이지 스크롤 0)이 되는지 단위검증 헬퍼. JSON 으로 냄. */
const fs = require("fs");
const path = require("path");
const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript"));

const file = path.join(__dirname, "..", "..", "ui_template", "ui_template_data_table.ts");
const js = ts.transpileModule(fs.readFileSync(file, "utf8"), {
  compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 },
}).outputText;

const ONE_LINE = 18; // 안내 글 한 줄(caption 글꼴) 높이
const win = { innerHeight: 0, scrollY: 0, addEventListener() {}, removeEventListener() {} };
const observers = [];
class RO {
  constructor(fn) {
    observers.push(fn);
  }
  observe() {}
  disconnect() {}
}
const el = (css = {}, height = 0) => ({
  css,
  height,
  top: 0,
  parentElement: null,
  nextElementSibling: null,
  isConnected: true,
  style: {},
  getBoundingClientRect() {
    return { top: this.top, height: this.height };
  },
});
const sty = (n) => ({
  rowGap: n.css.rowGap ?? "normal",
  paddingBottom: n.css.paddingBottom ?? "0px",
  borderBottomWidth: n.css.borderBottomWidth ?? "0px",
  marginBottom: n.css.marginBottom ?? "0px",
});
const box = { exports: {} };
new Function(
  "exports",
  "module",
  "require",
  "window",
  "document",
  "getComputedStyle",
  "ResizeObserver",
  js,
)(box.exports, box, (p) => (p.endsWith(".css") ? {} : require(p)), win, { body: null }, sty, RO);

const out = [];
for (const h of [1080, 768, 600]) {
  win.innerHeight = h;
  observers.length = 0;
  // 문서: body(padding-bottom 8) > card(padding-bottom 12 · gap 8) > [표 칸][안내 한 줄]
  const body = el({ paddingBottom: "8px" });
  const card = el({ paddingBottom: "12px", rowGap: "8px" });
  const root = el();
  const hint = el({}, ONE_LINE);
  card.parentElement = body;
  root.parentElement = card;
  hint.parentElement = card;
  root.nextElementSibling = hint;
  root.top = 200;
  box.exports.fillViewport(root);
  observers.forEach((fn) => fn());
  const grow = parseFloat(root.style.maxHeight);
  const below = box.exports.spaceBelow(root);
  out.push({ viewport: h, bottom: root.top + grow + below, grow, below });
}
console.log(JSON.stringify(out));