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

export async function runDigitalOutputsTest(page: Page) {
  await page.goto("/digitalOutputs");
  //----------------------
  await headerTest(page);
  await navTest(page);
  await footerTest(page);
  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();
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Ausgang", exact: true })
  );
  const ausgang2Cell = page.getByRole("cell", { name: "Ausgang2" }).nth(1);
  await ausgang2Cell.waitFor({ state: "visible", timeout: 15000 }); // bis zu 15 Sekunden warten
  await ausgang2Cell.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" })
  );
  page.getByRole("cell", { name: "1" }).locator("svg").click();
  //page.getByRole("cell", { name: "1" }).click();
  page.getByRole("cell", { name: "2", exact: true }).locator("svg").click();
  page.getByRole("cell", { name: "2", exact: true }).click();
  page.getByRole("cell", { name: "3", exact: true }).locator("svg").click();
  page.getByRole("cell", { name: "3", exact: true }).click();
  page.getByRole("cell", { name: "4", exact: true }).locator("svg").click();
  page.getByRole("cell", { name: "4", exact: true }).click();
}