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("CanvasShell finite Background layer", () => {
  it("renders the enabled finite Background below runtime media and product content", () => {
    const { container } = renderCanvasShell({
      children: <div data-testid="product-foreground" />,
      initialState: {
        layers: [
          {
            displayName: "Image",
            id: "image-layer",
            kind: "layer",
            name: "image",
            visible: true,
          },
        ],
        mediaAssets: [
          {
            sourceSize: { height: 200, unit: "px", width: 300 },
            assetKind: "image",
            fileName: "image.png",
            id: "image",
            layerId: "image-layer",
            lifecycle: "ready",
            mimeType: "image/png",
            position: { x: 0, y: 0 },
            resourceRef: "data:image/png;base64,test",
            size: { height: 200, unit: "px", width: 300 },
          },
        ],
        values: {
          "appearance.background": "#14B8A6",
          "export.includeBackground": true,
        },
      },
      schema: createBackgroundSchema(),
    });
    const canvas = container.querySelector("[data-toolcraft-editable-canvas]");
    const background = container.querySelector<HTMLElement>(
      "[data-toolcraft-finite-background-layer]",
    );
    const media = container.querySelector("[data-canvas-media-layer]");
    const product = container.querySelector("[data-toolcraft-product-scene]");
    const sceneOrigin = canvas?.querySelector("[data-toolcraft-scene-origin]");

    expect(background?.style.backgroundColor).toBe("rgb(20, 184, 166)");
    expect(background?.style.left).toBe("-150px");
    expect(background?.style.top).toBe("-100px");
    expect(background?.style.width).toBe("300px");
    expect(background?.style.height).toBe("200px");
    expect(background?.className).toContain("pointer-events-none");
    expect(canvas?.firstElementChild).toBe(sceneOrigin);
    expect(sceneOrigin?.firstElementChild).toBe(background);
    expect(media).toBeTruthy();
    expect(product).toBeTruthy();
    expect(media?.parentElement).toBe(sceneOrigin);
    expect(product?.parentElement).toBe(sceneOrigin);
    expect(background?.compareDocumentPosition(media as Node)).toBe(
      Node.DOCUMENT_POSITION_FOLLOWING,
    );
    expect(background?.compareDocumentPosition(product as Node)).toBe(
      Node.DOCUMENT_POSITION_FOLLOWING,
    );
  });

  it("omits the finite layer when Background is off or the canvas is infinite", () => {
    const disabled = renderCanvasShell({
      initialState: {
        values: {
          "appearance.background": "#14B8A6",
          "export.includeBackground": false,
        },
      },
      schema: createBackgroundSchema(),
    });

    expect(
      disabled.container.querySelector(
        "[data-toolcraft-finite-background-layer]",
      ),
    ).toBeNull();
    disabled.unmount();

    const infinite = renderCanvasShell({
      initialState: {
        canvas: {
          mode: "infinite",
          offset: { x: 0, y: 0 },
          size: { height: 200, unit: "px", width: 300 },
          zoom: 100,
        },
        values: {
          "appearance.background": "#14B8A6",
          "export.includeBackground": true,
        },
      },
      schema: createBackgroundSchema(),
    });

    expect(
      infinite.container.querySelector(
        "[data-toolcraft-finite-background-layer]",
      ),
    ).toBeNull();
    expect(
      infinite.container.querySelector<HTMLElement>(
        "[data-slot='toolcraft-runtime-canvas']",
      )?.style.backgroundColor,
    ).toBe("rgb(20, 184, 166)");
  });
});