import type { Page } from "@playwright/test";
import { highlightAndExpectVisible } from "@playwright/utils/highlight";
import { navTest } from "@/playwright/tests/components/navigation/navTest";
import { headerTest } from "@/playwright/tests/components/header/headerTest";
import { footerTest } from "@/playwright/tests/components/footer/footerTest";

export async function runDigitalOutputsTest(page: Page) {
  await page.goto("/digitalOutputs");
  //----------------------
  await headerTest(page);
  await navTest(page);
  await footerTest(page);
  // Wait a moment for initial redux fetch and render in slower CI environments
  await page.waitForTimeout(400);
  //----------------------
  await highlightAndExpectVisible(page, page.locator("h1"));
  page.locator("h1").click();
  await highlightAndExpectVisible(
    page,
    page.locator("h2").filter({ hasText: "Schaltausgänge" })
  );

  page
    .locator("h2")
    .filter({ hasText: "Schaltausgänge" })
    .locator("svg")
    .click();
  page.locator("h2").filter({ hasText: "Schaltausgänge" }).click();
  // Wait for the outputs table to render and be visible
  const table = page.locator("table");
  await table.first().waitFor({ state: "visible", timeout: 15000 });

  // Prefer robust selection: select the row by its first cell text matching the id "2"
  const rowAusgang2 = table
    .getByRole("row")
    .filter({ has: page.getByRole("cell", { name: /^\s*2\s*$/ }) })
    .first();
  await rowAusgang2.waitFor({ state: "visible", timeout: 15000 });
  await rowAusgang2.click();
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Schalter" })
  );
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Schalter" })
  );
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Aktion" })
  );
  // Interact with the switch icon within each row deterministically
  for (const id of [1, 2, 3, 4]) {
    const row = table
      .getByRole("row")
      .filter({
        has: page.getByRole("cell", { name: new RegExp(`^\\s*${id}\\s*$`) }),
      })
      .first();
    await row.waitFor({ state: "visible", timeout: 10000 });
    const switchIcon = row.locator("td >> nth=2").locator("svg");
    await switchIcon.first().click();
  }
}