import { expect, test } from '@playwright/test';
import { APP_LOCALES } from '../src/app/core/i18n/locale';
import { pagePath } from './helpers';

test.describe('fragment scrolling', () => {
  test('case headings clear the sticky header at desktop width', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name === 'mobile', 'sticky header applies from md up');

    await page.setViewportSize({ width: 1440, height: 900 });

    for (const locale of APP_LOCALES) {
      const path = `${pagePath('projects', locale)}#myspa`;
      await page.goto(path, { waitUntil: 'networkidle' });

      const header = page.locator('.site-header');
      const heading = page.locator('#myspa h2');
      await expect(heading).toBeVisible();

      await page.evaluate(async () => {
        await new Promise<void>((resolve) => {
          let last = window.scrollY;
          let stableFrames = 0;
          const tick = () => {
            if (window.scrollY === last) {
              stableFrames += 1;
              if (stableFrames >= 8) {
                resolve();
                return;
              }
            } else {
              stableFrames = 0;
              last = window.scrollY;
            }
            requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        });
      });

      const headerBox = await header.boundingBox();
      const headingBox = await heading.boundingBox();
      expect(headerBox, path).toBeTruthy();
      expect(headingBox, path).toBeTruthy();
      expect(headingBox!.y, path).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height - 1);
    }
  });
});