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

import { CanvasSceneSurface } from "./canvas-scene-surface";

describe("CanvasSceneSurface", () => {
  it("centers the finite clipped artboard around one scene origin", () => {
    const { container } = render(
      <CanvasSceneSurface
        frame={{
          kind: "finite",
          size: { height: 200, unit: "px", width: 300 },
        }}
      >
        content
      </CanvasSceneSurface>,
    );
    const surface = container.querySelector<HTMLElement>(
      "[data-toolcraft-canvas-surface]",
    );
    const sceneOrigin = container.querySelector<HTMLElement>(
      "[data-toolcraft-scene-origin]",
    );

    expect(surface?.dataset.toolcraftCanvasMode).toBe("finite");
    expect(surface?.hasAttribute("data-toolcraft-editable-canvas")).toBe(true);
    expect(surface?.hasAttribute("data-toolcraft-infinite-scene")).toBe(false);
    expect(surface?.style).toMatchObject({
      height: "200px",
      left: "-150px",
      top: "-100px",
      width: "300px",
    });
    expect(surface?.className).toContain("overflow-hidden");
    expect(sceneOrigin?.parentElement).toBe(surface);
    expect(sceneOrigin?.style).toMatchObject({ left: "150px", top: "100px" });
  });

  it("renders an unclipped zero-sized infinite surface at the same scene origin", () => {
    const { container } = render(
      <CanvasSceneSurface frame={{ kind: "infinite" }}>content</CanvasSceneSurface>,
    );
    const surface = container.querySelector<HTMLElement>(
      "[data-toolcraft-canvas-surface]",
    );
    const sceneOrigin = container.querySelector<HTMLElement>(
      "[data-toolcraft-scene-origin]",
    );

    expect(surface?.dataset.toolcraftCanvasMode).toBe("infinite");
    expect(surface?.hasAttribute("data-toolcraft-editable-canvas")).toBe(false);
    expect(surface?.hasAttribute("data-toolcraft-infinite-scene")).toBe(true);
    expect(surface?.style).toMatchObject({
      height: "0px",
      left: "0px",
      top: "0px",
      width: "0px",
    });
    expect(surface?.className).toContain("overflow-visible");
    expect(sceneOrigin?.parentElement).toBe(surface);
    expect(sceneOrigin?.style).toMatchObject({ left: "0px", top: "0px" });
  });
});