// @vitest-environment jsdom

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

afterEach(cleanup);

describe("CanvasDotPattern", () => {
  it.each([
    [0.5, 12, 0.75, "translate(-6, -18)"],
    [1, 24, 1.5, "translate(0, -36)"],
    [4, 96, 6, "translate(-36, -72)"],
  ])("scales dot geometry at scale %s and signed pan", (scale, gap, radius, transform) => {
    const { container } = render(<CanvasDotPattern offset={{ x: 13, y: -23 }} scale={scale} />);
    const pattern = container.querySelector("pattern")!;
    expect(pattern.getAttribute("width")).toBe(String(gap));
    expect(pattern.getAttribute("height")).toBe(String(gap));
    expect(pattern.getAttribute("patternTransform")).toBe(transform);
    expect(pattern.getAttribute("x")).toBe("50%");
    expect(pattern.getAttribute("y")).toBe("50%");
    expect(container.querySelector("circle")?.getAttribute("r")).toBe(String(radius));
    expect(container.querySelector("circle")?.getAttribute("fill")).toBe("var(--foreground)");
    expect(container.querySelector("circle")?.getAttribute("fill-opacity")).toBe("0.1");
    expect(container.querySelectorAll("circle")).toHaveLength(1);
    expect(container.querySelectorAll("image, canvas")).toHaveLength(0);
  });

  it("keeps pattern references unique and invalid transforms finite", () => {
    const { container } = render(<>
      <CanvasDotPattern offset={{ x: NaN, y: Infinity }} scale={0} />
      <CanvasDotPattern offset={{ x: 0, y: 0 }} scale={NaN} />
    </>);
    const patterns = [...container.querySelectorAll("pattern")];
    expect(new Set(patterns.map((node) => node.id)).size).toBe(2);
    for (const [index, pattern] of patterns.entries()) {
      expect(pattern.getAttribute("width")).toBe("24");
      expect(pattern.getAttribute("patternTransform")).toBe("translate(-13, -13)");
      expect(container.querySelectorAll("rect")[index]?.getAttribute("fill")).toBe(`url(#${pattern.id})`);
    }
  });
});