import { expect, test } from './fixtures';

// Item 5: zooming the board must enlarge the labels too (a magnifying-glass zoom).
// cqw is sized against the zoom-scaled board, so the font grows with the cells.
test('zoom enlarges the board labels with the board', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await page.getByRole('button', { name: /Ann/ }).click();

  const letter = page.locator('[data-cell] .letter').first();
  await expect(letter).toBeVisible();
  const base = await letter.evaluate((el) => parseFloat(getComputedStyle(el).fontSize));

  // Double-tap an empty cell to zoom in (two synchronous clicks = a double-tap).
  await page
    .locator('[data-cell]:not(.filled)')
    .nth(20)
    .evaluate((el: HTMLElement) => {
      el.click();
      el.click();
    });
  await page.waitForTimeout(400); // let the width transition settle

  const zoomed = await letter.evaluate((el) => parseFloat(getComputedStyle(el).fontSize));
  expect(zoomed).toBeGreaterThan(base * 1.4);
});

// Item 4 (UX): the zoomed board clamps at its edge — no native rubber-band/overscroll past
// the content. We assert the CSS contract on the zoomed scroll container, which is
// deterministic across engines (the bounce gesture itself is a native compositor behaviour
// Playwright cannot reliably synthesize).
test('zoomed board clamps overscroll at the edge', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await page.getByRole('button', { name: /Ann/ }).click();

  // Double-tap an empty cell to zoom in.
  await page
    .locator('[data-cell]:not(.filled)')
    .nth(20)
    .evaluate((el: HTMLElement) => {
      el.click();
      el.click();
    });

  const viewport = page.locator('.viewport.zoomed');
  await expect(viewport).toBeVisible();
  const ob = await viewport.evaluate((el) => {
    const s = getComputedStyle(el);
    return { x: s.overscrollBehaviorX, y: s.overscrollBehaviorY };
  });
  expect(ob.x).toBe('none');
  expect(ob.y).toBe('none');
});