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

test.beforeEach(async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: "IDX", exact: true }).click();
});

test("register unindexed key, reorder its output number, and undo", async ({ page }) => {
  await page.getByRole("button", { name: "PHY", exact: true }).click();
  await page.getByRole("button", { name: "キー追加" }).click();
  await page.getByRole("button", { name: "IDX", exact: true }).click();

  const unregisteredRow = page.locator(".idx-all-keys li.unregistered").first();
  const keyId = (await unregisteredRow.locator("b").innerText()).trim();
  await unregisteredRow.getByRole("button", { name: "登録" }).click();
  const row = page.getByTestId(`idx-row-${keyId}`);
  await expect(row).toBeVisible();
  const previewKey = page.locator(`[data-testid="keyboard-view"] [data-key-id="${keyId}"] text`);
  await expect(previewKey).toHaveText("16");

  await row.getByRole("button", { name: `${keyId}を上へ` }).click();
  await expect(previewKey).toHaveText("15");
  await page.getByRole("button", { name: "Undo" }).click();
  await expect(previewKey).toHaveText("16");
});

test("output numbers recalculate after switching to a variant that excludes ordered keys", async ({
  page,
}) => {
  await page.getByRole("button", { name: "PHY", exact: true }).click();
  const treeKeys = page.locator(".tree-node").filter({ hasText: "キー ·" });
  const firstId = await treeKeys.nth(0).getAttribute("data-tree-id");
  const secondId = await treeKeys.nth(1).getAttribute("data-tree-id");
  await treeKeys.nth(0).click();
  await treeKeys.nth(1).click({ modifiers: ["Shift"] });
  await page.getByRole("button", { name: "選択からVariantGroup" }).click();
  await page.getByRole("button", { name: "IDX", exact: true }).click();
  await expect(page.getByTestId(`idx-row-${firstId}`)).toContainText("出力 0");
  await page.getByLabel("Layout 出力バリアント").selectOption({ label: "Option B" });
  await expect(page.getByTestId(`idx-row-${firstId}`)).toContainText("出力対象外");
  await expect(page.getByTestId(`idx-row-${secondId}`)).toContainText("出力対象外");
  const remaining = page.locator(".idx-all-keys .idx-preview").filter({ hasText: "出力 0" });
  await expect(remaining).toHaveCount(1);
});