import { expect, test } from "@playwright/test";
import { CHANNEL_SLUG, VIDEO_TRANSCRIPT_ONLY } from "./fixtures/data";
import { expectModalOpen, installRoutes } from "./helpers";

test.use({
  permissions: ["clipboard-read", "clipboard-write"],
});

test.describe("video modal — control bar", () => {
  test.beforeEach(async ({ page }) => {
    await installRoutes(page);
  });

  test("clip mark + copy download command", async ({ page, context }) => {
    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
    await page.goto(
      `/?v=${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}&t=10`,
    );
    await expectModalOpen(page);

    // Mark start at the current playhead. With rumble, currentTime is
    // seeded from urlTime (10).
    await page
      .getByRole("button", { name: "Mark clip start at current time" })
      .click();

    // Move the playhead via cue click to t=50 (beta line).
    await page.locator("li", { hasText: "beta line" }).click();

    // Mark end at the new playhead.
    await page
      .getByRole("button", { name: "Mark clip end at current time" })
      .click();

    await page
      .getByRole("button", { name: /Copy yt-dlp download command/ })
      .click();
    const clip = await page.evaluate(() => navigator.clipboard.readText());
    expect(clip).toMatch(/^yt-dlp --download-sections "\*\d\d:\d\d:\d\d-\d\d:\d\d:\d\d" "https:\/\/example\.com\//);
  });

  test("collapse to mini then restore to modal", async ({ page }) => {
    await page.goto(`/?v=${CHANNEL_SLUG}/${VIDEO_TRANSCRIPT_ONLY}`);
    await expectModalOpen(page);

    // Two buttons match this name — the backdrop (covered by iframe) and the
    // toolbar control. `.last()` picks the toolbar one.
    await page
      .getByRole("button", { name: "Collapse to mini-player" })
      .last()
      .click();
    const reopen = page.getByRole("button", { name: "Reopen transcript" });
    await reopen.click();
    await expectModalOpen(page);
  });
});