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

const messagePageStyles = fs.readFileSync(
  path.join(__dirname, "../../src/pages/message/index.scss"),
  "utf8"
);
const messagePageSource = fs.readFileSync(
  path.join(__dirname, "../../src/pages/message/index.tsx"),
  "utf8"
);

function run(name, fn) {
  try {
    fn();
    console.log(`PASS ${name}`);
  } catch (error) {
    console.error(`FAIL ${name}`);
    throw error;
  }
}

run("message tabs container spans full width without manual gap spacing", () => {
  assert.match(messagePageStyles, /\.message-tabs\s*\{[\s\S]*width:\s*100%;/);
  assert.doesNotMatch(messagePageStyles, /\.message-tabs\s*\{[\s\S]*gap:\s*110rpx;/);
});

run("each message tab item takes half of the row", () => {
  assert.match(messagePageStyles, /\.message-tabs__item\s*\{[\s\S]*flex:\s*1;/);
  assert.match(messagePageStyles, /\.message-tabs__item\s*\{[\s\S]*min-width:\s*0;/);
});

run("message tab label and unread dot are grouped in a centered content wrapper", () => {
  assert.match(messagePageSource, /className="message-tabs__content"/);
  assert.match(messagePageStyles, /\.message-tabs__content\s*\{[\s\S]*display:\s*inline-flex;/);
});

run("message tabs are rendered below AppBar instead of inside bottomSlot", () => {
  assert.doesNotMatch(messagePageSource, /bottomSlot=\{/);
  assert.match(
    messagePageSource,
    /<AppBar[\s\S]*\/>\s*<View className="message-tabs">/
  );
});