import { expect, test } from "@playwright/test";
import path from "node:path";

const fixture = path.resolve(import.meta.dirname, "../../../tests/files/web/modifier_grease_pencil_scene.blend");
const expectedPointIds = Array.from({ length: 4 }, (_, index) => `grease-pencil-point:GreasePencilData:0:0:${index}`);

for (const offscreen of [false, true]) {
  test(`M9-07 shares one Grease Pencil selection revision between 2D canvas and ${offscreen ? "OffscreenCanvas" : "main-thread"} 3D viewport`, async ({ page }) => {
    test.setTimeout(90_000);
    await page.goto(offscreen ? "/?offscreen=1" : "/");
    await expect(page.getByTestId("engine-status")).toContainText("ready, open a .blend file", { timeout: 20_000 });
    await page.getByTestId("blend-file-input").setInputFiles(fixture);
    await page.getByText("GreasePencilObject", { exact: true }).click();
    await page.getByRole("button", { name: "Object Mode" }).click();

    const app = page.locator(".blender-app");
    const viewport = page.locator("canvas.viewport-canvas");
    const canvas = page.getByTestId("grease-pencil-canvas-2d");
    await expect(canvas).toHaveAttribute("data-selection-revision", "0");
    const mainRevision = Number(await app.getAttribute("data-current-main-revision"));
    const first = await canvas.evaluate((element) => JSON.parse(element.dataset.pointLayout ?? "[]")[0] as { pointId: string; x: number; y: number });
    await canvas.scrollIntoViewIfNeeded();
    const bounds = await canvas.boundingBox();
    if (!bounds || !first) throw new Error("Grease Pencil 2D canvas point layout is unavailable");
    await page.mouse.click(bounds.x + (first.x / 280) * bounds.width, bounds.y + (first.y / 150) * bounds.height);

    await expect(app).toHaveAttribute("data-grease-pencil-selection-revision", "1");
    await expect(app).toHaveAttribute("data-grease-pencil-selection-source", "CANVAS_2D");
    await expect(canvas).toHaveAttribute("data-selected-point-ids", first.pointId);
    await expect(viewport).toHaveAttribute("data-grease-pencil-selection-revision", "1", { timeout: 20_000 });
    await expect(viewport).toHaveAttribute("data-grease-pencil-selection-point-ids", first.pointId);

    await page.getByRole("button", { name: "Grease Pencil 框选工具" }).click();
    const marquee = page.getByTestId("grease-pencil-marquee-surface");
    const marqueeBounds = await marquee.boundingBox();
    if (!marqueeBounds) throw new Error("Grease Pencil 3D marquee surface is unavailable");
    await page.mouse.move(marqueeBounds.x + 3, marqueeBounds.y + 3);
    await page.mouse.down();
    await page.mouse.move(marqueeBounds.x + marqueeBounds.width - 3, marqueeBounds.y + marqueeBounds.height - 3, { steps: 4 });
    await page.mouse.up();

    await expect(app).toHaveAttribute("data-grease-pencil-selection-revision", "2", { timeout: 20_000 });
    await expect(app).toHaveAttribute("data-grease-pencil-selection-source", "VIEWPORT_3D");
    await expect.poll(async () => (await canvas.getAttribute("data-selected-point-ids"))?.split(",").filter(Boolean).sort()).toEqual(expectedPointIds);
    await expect(canvas).toHaveAttribute("data-selection-revision", "2");
    await expect(viewport).toHaveAttribute("data-grease-pencil-selection-revision", "2", { timeout: 20_000 });
    expect(Number(await app.getAttribute("data-current-main-revision"))).toBe(mainRevision);
    await expect(viewport).toHaveAttribute("data-renderer-backend", offscreen ? "offscreen-worker" : "webgl-pbr");
  });
}