// Rôle : monte le CSS complet compilé et lit les styles calculés des fixtures visuelles.
import { compile } from "sass";
import { expect } from "@playwright/test";

let css;
export async function mountStyles(page, html) {
  css ??= compile("website/src/styles/main.scss").css;
  await page.setContent(`<!doctype html>${html}`);
  await page.addStyleTag({ content: css });
  await page.mouse.move(0, 0);
}

export function computed(locator, property, pseudo = null) {
  return locator.evaluate((element, { property, pseudo }) =>
    element.ownerDocument.defaultView.getComputedStyle(element, pseudo).getPropertyValue(property),
  { property, pseudo });
}

export async function expectPseudo(locator, pseudo, property, value) {
  await expect.poll(() => computed(locator, property, pseudo)).toEqual(value);
}

export async function expectFits(locator) {
  await expect(locator).toBeVisible();
  const viewport = locator.page().viewportSize();
  await expect.poll(async () => (await locator.boundingBox()).x).toBeGreaterThanOrEqual(-1);
  await expect.poll(async () => {
    const bounds = await locator.boundingBox();
    return bounds.x + bounds.width;
  }).toBeLessThanOrEqual(viewport.width + 1);
  expect(await locator.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
}