"use strict";

const assert = require("node:assert");
const { test } = require("node:test");
const { formatWrn } = require("../src/formatter");

test("formats compact props blocks with one prop per line", () => {
  const source = `component Header {\nprops { eyebrow = "" title = "" description = "" align = "start" class = "" }\nview { <header>{title}</header> }\n}\n`;
  const expected = `component Header {\n  props {\n    eyebrow = ""\n    title = ""\n    description = ""\n    align = "start"\n    class = ""\n  }\n  view { <header>{title}</header> }\n}\n`;

  assert.equal(formatWrn(source, { insertSpaces: true, tabSize: 2 }), expected);
});

test("preserves nested prop defaults while formatting", () => {
  const source = `component Grid {\nprops { items = [{ label: "A" }, { label: "B" }] options = { gap: 4, dense: false } class = "" }\nview { <div/> }\n}\n`;
  const formatted = formatWrn(source, { insertSpaces: true, tabSize: 2 });

  assert.match(formatted, /items = \[\{ label: "A" \}, \{ label: "B" \}\]/);
  assert.match(formatted, /options = \{ gap: 4, dense: false \}/);
  assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted);
});

test("keeps long inline-closing tags idempotent after multiline expansion", () => {
  const source = `component Status {
  view {
    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)]">
      <span class="inline-flex items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold">
        <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
      </span>
    </section>
  }
}
`;
  const options = { insertSpaces: true, tabSize: 2, printWidth: 100 };
  const formatted = formatWrn(source, options);

  assert.equal(formatWrn(formatted, options), formatted);
  assert.match(formatted, /<\/span>Loading/);
});