import { cleanup } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { createBackgroundSchema, renderCanvasShell } from "./canvas-shell-test-utils";

afterEach(() => { cleanup(); window.localStorage.clear(); });

describe("Workspace background layer", () => {
  it("defaults to Dots", () => {
    const { container } = renderCanvasShell({ schema: createBackgroundSchema() });
    expect(container.querySelector('[data-slot="canvas-dot-pattern"]')).not.toBeNull();
  });

  it("preserves an explicitly selected Blanc workspace", () => {
    const { container } = renderCanvasShell({
      schema: createBackgroundSchema(),
      initialState: { values: { "canvas.workspaceBackground": "blanc" } },
    });
    expect(container.querySelector('[data-slot="canvas-dot-pattern"]')).toBeNull();
  });

  it.each(["finite", "infinite"] as const)("keeps dots outside %s product output and follows its viewport", (mode) => {
    const { container } = renderCanvasShell({
      schema: createBackgroundSchema(),
      children: <div data-testid="product" />,
      infiniteCanvasContent: <div data-testid="environment" />,
      initialState: {
        canvas: { mode, offset: { x: 13, y: -23 }, zoom: 200 },
        values: { "canvas.workspaceBackground": "dots" },
      },
    });
    const dots = container.querySelector('[data-slot="canvas-dot-pattern"]')!;
    const world = container.querySelector("[data-toolcraft-canvas-world]")!;
    expect(dots).not.toBeNull();
    expect(dots.parentElement).toBe(world.parentElement);
    expect(dots.compareDocumentPosition(world)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
    expect(world.contains(dots)).toBe(false);
    expect(container.querySelector("[data-toolcraft-canvas-surface]")?.contains(dots)).toBe(false);
    expect(dots.querySelector("pattern")?.getAttribute("width")).toBe("48");
    expect(dots.querySelector("circle")?.getAttribute("r")).toBe("3");
    if (mode === "infinite") {
      const environment = container.querySelector("[data-toolcraft-infinite-canvas-content]")!;
      expect(dots.compareDocumentPosition(environment)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
    }
  });

  it("keeps workspace dots when the product Background is off", () => {
    const { container } = renderCanvasShell({
      schema: createBackgroundSchema(),
      initialState: { values: { "canvas.workspaceBackground": "dots", "export.includeBackground": false } },
    });
    expect(container.querySelector('[data-slot="canvas-dot-pattern"]')).not.toBeNull();
    expect(container.querySelector("[data-toolcraft-finite-background-layer]")).toBeNull();
  });
});