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

const storybookPort = Number(process.env.PLAYWRIGHT_STORYBOOK_PORT || 6007);
const storybookURL = `http://127.0.0.1:${storybookPort}`;

test.describe("Storybook theme QA", () => {
  test("renders the ThemeToggle light story on the light canvas", async ({
    page,
  }, testInfo) => {
    test.skip(testInfo.project.name !== "chromium-desktop");

    const consoleMessages: string[] = [];
    page.on("console", (message) => {
      if (["error", "warning"].includes(message.type())) {
        consoleMessages.push(message.text());
      }
    });

    const url = `${storybookURL}/iframe.html?id=ui-themetoggle--light&viewMode=story`;
    await page.goto(url, { waitUntil: "networkidle" });

    await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
    await expect(
      page.getByRole("button", { name: "Light theme" }),
    ).toBeVisible();
    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
      "aria-pressed",
      "true",
    );
    await expect(page.locator("body")).toHaveCSS(
      "background-color",
      "rgb(238, 242, 231)",
    );
    expect(
      consoleMessages.filter((message) =>
        message.includes("Global args/argTypes can only be set globally"),
      ),
    ).toEqual([]);
  });
});