import { mkdirSync } from "node:fs";
import { resolve } from "node:path";
import { chromium } from "@playwright/test";

const baseUrl = process.env.DADA_MANUAL_PREVIEW_URL ?? "http://127.0.0.1:43122/app/projects/00000000-0000-4000-8000-000000000904/editor";
const output = resolve(process.env.DADA_COMPARISON_DIR ?? "artifacts/manual-review/wp4-04-original-comparison");
mkdirSync(output, { recursive: true });

const browser = await chromium.launch({ channel: "msedge" });
const page = await browser.newPage({ viewport: { height: 1200, width: 1500 } });
await page.goto(baseUrl);
await page.getByText("原版贴纸人工检查").waitFor();

async function capture(tab, filename, waitForFonts = false) {
  await page.getByRole("button", { name: tab, exact: true }).click();
  if (waitForFonts) {
    const ids = ["15974853bc3294ef68e7e6d58fe74fd7", "46f8336813e4c48d06a1aef294fdccf6", "53ca6b704728520da50c145eabb2e635", "cca5efc0e02fb1bf62349bd68ef30fc1", "dd25b35dcb7ba4476cbaa9a9592e39e2", "e4210c9872f0c279b35273f230809821", "f4bfd4132df2d6be97ceabadf3853505", "FONT081"];
    await page.waitForFunction((fontIds) => fontIds.every((id) => document.fonts.check(`16px "Dada_${id}"`)), ids, { timeout: 15_000 });
  }
  await page.waitForTimeout(800);
  const panel = page.locator(".editor-assets-panel");
  await panel.evaluate((element) => {
    const node = element;
    node.style.height = "max-content";
    node.style.maxHeight = "none";
    node.style.overflow = "visible";
  });
  await panel.screenshot({ path: resolve(output, filename) });
}

await capture("普通贴纸", "web-ordinary.png");
await capture("色卡", "web-colors.png");
await capture("动态贴纸", "web-dynamic.png", true);
await browser.close();
console.log(output);