import { test, expect } from "@playwright/test";
import { headerTest } from "@/playwright/tests/components/header/headerTest";
import { navTest } from "@/playwright/tests/components/navigation/navTest";
import { footerTest } from "@/playwright/tests/components/footer/footerTest";

test.use({
  viewport: {
    height: 800,
    width: 1280,
  },
});

test("digitalOutputs", async ({ page }) => {
  await page.goto("/dashboard");
  // Gemeinsame Layout-Checks
  await headerTest(page);
  await navTest(page);
  await footerTest(page);
  await page.getByRole("link", { name: "Schaltausgänge" }).click();
  await expect(page.locator("h1")).toBeVisible();
  await expect(
    page.locator("h2").filter({ hasText: "Schaltausgänge" }).locator("svg")
  ).toBeVisible();
  await expect(
    page.locator("h2").filter({ hasText: "Schaltausgänge" })
  ).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "Ausgang", exact: true })
  ).toBeVisible();
  await expect(page.getByRole("cell", { name: "Bezeichnung" })).toBeVisible();
  await expect(page.getByRole("cell", { name: "Schalter" })).toBeVisible();
  await expect(page.getByRole("cell", { name: "Aktion" })).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "1", exact: true }).locator("svg")
  ).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "1", exact: true })
  ).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "2", exact: true })
  ).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "3", exact: true })
  ).toBeVisible();
  await expect(
    page.getByRole("cell", { name: "4", exact: true })
  ).toBeVisible();
  await expect(page.getByRole("cell", { name: "Ausgang1" })).toBeVisible();
  await expect(page.getByRole("cell", { name: "Ausgang2" })).toBeVisible();
  await expect(page.getByRole("cell", { name: "Ausgang3" })).toBeVisible();
  await expect(page.getByRole("cell", { name: "Ausgang4" })).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang1" }).getByRole("cell").nth(2)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang2" }).getByRole("cell").nth(2)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang3" }).getByRole("cell").nth(2)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang4" }).getByRole("cell").nth(2)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang1" }).getByRole("cell").nth(3)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang2" }).getByRole("cell").nth(3)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang3" }).getByRole("cell").nth(3)
  ).toBeVisible();
  await expect(
    page.getByRole("row", { name: "Ausgang4" }).getByRole("cell").nth(3)
  ).toBeVisible();
  await page
    .getByRole("row", { name: "Ausgang1" })
    .locator("svg")
    .nth(1)
    .click();
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - heading "Einstellungen Schaltausgang 1" [level=2]
    - button "Modal schließen"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - text: "Bezeichnung:"
    - textbox "z. B. Licht Relais 1"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(
    `- button "Speichern"`
  );
  await page.getByRole("button", { name: "Modal schließen" }).click();
  await page
    .getByRole("row", { name: "Ausgang2" })
    .locator("svg")
    .nth(1)
    .click();
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - heading "Einstellungen Schaltausgang 2" [level=2]
    - button "Modal schließen"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - text: "Bezeichnung:"
    - textbox "z. B. Licht Relais 1"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(
    `- button "Speichern"`
  );
  await page.getByRole("button", { name: "Modal schließen" }).click();
  await page
    .getByRole("row", { name: "Ausgang3" })
    .locator("svg")
    .nth(1)
    .click();
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - heading "Einstellungen Schaltausgang 3" [level=2]
    - button "Modal schließen"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - text: "Bezeichnung:"
    - textbox "z. B. Licht Relais 1"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(
    `- button "Speichern"`
  );
  await page.getByRole("button", { name: "Modal schließen" }).click();
  await page
    .getByRole("row", { name: "Ausgang4" })
    .locator("svg")
    .nth(1)
    .click();
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - heading "Einstellungen Schaltausgang 4" [level=2]
    - button "Modal schließen"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - text: "Bezeichnung:"
    - textbox "z. B. Licht Relais 1"
    `);
  await expect(page.getByRole("main")).toMatchAriaSnapshot(
    `- button "Speichern"`
  );
  await page.getByRole("button", { name: "Modal schließen" }).click();
});