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

for (const width of [1440, 900, 390]) {
  test(`mixed form controls and attachment actions remain aligned at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 1200 });
    const errors: string[] = [];
    page.on("pageerror", (error) => errors.push(error.message));
    await page.route((url) => url.pathname.startsWith("/api/"), (route) => route.abort());
    await page.goto("/?form-control-layout&language=en");
    const grid = page.getByTestId("mixed-form-grid");
    const password = grid.locator('input[type="password"]');
    const remove = grid.locator(".toggle-switch-row").filter({ hasText: "Remove configured secret" });
    await expect(remove).toBeVisible();
    if (width > 1100) {
      for (const [input, toggle] of [
        [password, remove.locator(".toggle-switch-track")],
        [grid.getByRole("textbox", { name: "Wrapped field", exact: true }), grid.locator(".content-grid-item .toggle-switch-track")],
        [page.getByRole("textbox", { name: "Other setting", exact: true }), page.getByTestId("mixed-form-layout").locator(".toggle-switch-track")]
      ]) {
        await expect.poll(async () => {
          const a = await input.boundingBox(), b = await toggle.boundingBox();
          return a && b ? Math.abs(a.y + a.height / 2 - b.y - b.height / 2) : Infinity;
        }).toBeLessThan(2);
      }
      const long = await grid.getByRole("textbox", { name: "Long label field" }).boundingBox();
      const short = await grid.getByRole("textbox", { name: "Short label field" }).boundingBox();
      expect(Math.abs(long!.y - short!.y)).toBeLessThan(2);
    } else {
      const field = await password.boundingBox(), toggle = await remove.boundingBox();
      expect(toggle!.y).toBeGreaterThan(field!.y + field!.height);
      expect(toggle!.height).toBeLessThanOrEqual(64);
    }
    await remove.getByRole("checkbox").focus();
    await page.keyboard.press("Space");
    await expect(remove.getByRole("checkbox")).toBeChecked();
    await password.fill("fixture-only");
    await expect(remove.getByRole("checkbox")).toBeDisabled();
    await expect(page.getByTestId("compact-action").getByRole("button")).toHaveCSS("width", "36px");
    const attachments = page.getByTestId("global-attachments");
    const add = attachments.getByRole("button", { name: "Add first attachment", exact: true });
    await expect(add).toHaveCSS("width", "36px");
    await expect.poll(() => attachments.locator(".data-grid-empty-action-cell").evaluate((node) => node.getBoundingClientRect().width)).toBeLessThanOrEqual(200);
    await add.click();
    await expect(attachments.locator(".data-grid-empty-action-cell")).toHaveCount(0);
    await expect(attachments.getByRole("button", { name: "Add attachment below", exact: true })).toHaveCSS("width", "36px");
    await expect.poll(() => page.locator("main").evaluate((node) => node.scrollWidth <= node.clientWidth + 1)).toBe(true);
    expect(errors).toEqual([]);
  });
}