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

test("native scroll regions share the workbench scrollbar presentation", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const reference = page
    .getByRole("region", { name: "工况任务", exact: true })
    .getByTestId("scheduled-condition-timeline")
    .locator(".scheduled-feed-scroll.flex-1");

  await page.evaluate(() => {
    const probe = document.createElement("div");
    const content = document.createElement("div");

    probe.dataset.testid = "global-scrollbar-probe";
    probe.style.cssText =
      "position:fixed;left:8px;bottom:8px;width:40px;height:40px;overflow:auto;z-index:9999";
    content.style.cssText = "width:80px;height:80px";
    probe.append(content);
    document.body.append(probe);
  });

  const probe = page.getByTestId("global-scrollbar-probe");
  const presentation = await readScrollbarPresentation(reference);
  expect(await readScrollbarPresentation(probe)).toEqual(presentation);
  expect(presentation).toMatchObject({
    height: "4px",
    thumbRadius: "2px",
    trackRadius: "0px",
    width: "4px"
  });

  await reference.hover();
  const referenceHoverThumb = await readScrollbarThumb(reference);
  await probe.hover();
  expect(await readScrollbarThumb(probe)).toBe(referenceHoverThumb);
});

test("intentional hidden-scrollbar regions remain hidden", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.evaluate(() => {
    const probe = document.createElement("div");
    const content = document.createElement("div");

    probe.dataset.testid = "hidden-scrollbar-probe";
    probe.className = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
    probe.style.cssText = "width:40px;height:40px;overflow:auto";
    content.style.cssText = "width:80px;height:80px";
    probe.append(content);
    document.body.append(probe);
  });

  const hiddenProbe = page.getByTestId("hidden-scrollbar-probe");
  const presentation = await hiddenProbe.evaluate((element) => ({
    display: getComputedStyle(element, "::-webkit-scrollbar").display,
    width: getComputedStyle(element).scrollbarWidth
  }));

  expect(presentation).toEqual({
    display: "none",
    width: "none"
  });
});

async function readScrollbarPresentation(locator: Locator) {
  return locator.evaluate((element) => {
    const style = getComputedStyle(element);
    const scrollbar = getComputedStyle(element, "::-webkit-scrollbar");
    const track = getComputedStyle(element, "::-webkit-scrollbar-track");
    const thumb = getComputedStyle(element, "::-webkit-scrollbar-thumb");
    const corner = getComputedStyle(element, "::-webkit-scrollbar-corner");

    return {
      color: style.scrollbarColor,
      cornerBackground: corner.backgroundColor,
      height: scrollbar.height,
      thumbBackground: thumb.backgroundColor,
      thumbRadius: thumb.borderRadius,
      trackBackground: track.backgroundColor,
      trackRadius: track.borderRadius,
      width: scrollbar.width,
      widthMode: style.scrollbarWidth
    };
  });
}

async function readScrollbarThumb(locator: Locator) {
  return locator.evaluate(
    (element) => getComputedStyle(element, "::-webkit-scrollbar-thumb").backgroundColor
  );
}