// @vitest-environment jsdom

import { cleanup, render } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";

import { ScrollFade } from "./scroll-fade";
import type { ScrollFadePreset } from "./scroll-fade-types";

afterEach(() => {
  cleanup();
});

function getViewport(container: HTMLElement): HTMLElement {
  const viewport = container.querySelector<HTMLElement>(
    '[data-slot="scroll-fade-viewport"]',
  );

  if (!viewport) {
    throw new Error("ScrollFade viewport was not rendered.");
  }

  return viewport;
}

describe("ScrollFade scroll boundary behavior", () => {
  it("contains nested scrolling by default", () => {
    const { container } = render(
      <ScrollFade>
        <div>Content</div>
      </ScrollFade>,
    );
    const viewport = getViewport(container);

    expect(viewport.className).toContain("overscroll-contain");
    expect(viewport.className).not.toContain("overscroll-auto");
    expect(viewport.dataset.scrollBoundaryBehavior).toBe("contain");
  });

  it.each([
    ["compact", undefined],
    ["default", undefined],
    ["large", undefined],
    ["default", 73],
  ] satisfies readonly [ScrollFadePreset, number | undefined][])(
    "chains %s image-list scrolling for height %s",
    (preset, height) => {
      const { container } = render(
        <ScrollFade
          height={height}
          preset={preset}
          scrollBoundaryBehavior="chain"
        >
          <div>Image grid</div>
        </ScrollFade>,
      );
      const viewport = getViewport(container);

      expect(viewport.className).toContain("overscroll-auto");
      expect(viewport.className).not.toContain("overscroll-contain");
      expect(viewport.dataset.scrollBoundaryBehavior).toBe("chain");
    },
  );
});