import { describe, expect, test } from "bun:test";
import { panPlugin } from "../plugins/panPlugin";
import {
  createKeyboardEvent,
  createPointerEvent,
  createTestCanvas,
  createWheelEvent,
} from "./canvasTestUtils";

describe("pan plugin", () => {
  test("toggles modes and updates origin while dragging", () => {
    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(panPlugin()),
      {
        data: {
          size: { width: 100, height: 100 },
          origin: { x: 0, y: 0 },
        },
      }
    );

    harness.handlers.onKeyDown?.(createKeyboardEvent("Space"));
    expect(harness.getMode().type).toBe("panMode");
    expect(harness.getReadOnly()).toBe(true);

    harness.handlers.onPointerDown?.(createPointerEvent({ x: 0, y: 0 }));
    expect(harness.getMode().type).toBe("maybePan");

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 10, y: 0 }));
    expect(harness.getMode().type).toBe("panning");

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 20, y: 10 }));
    expect(harness.getData().origin).toEqual({ x: 10, y: 10 });

    harness.handlers.onPointerUp?.(createPointerEvent({ x: 20, y: 10 }));
    expect(harness.getMode().type).toBe("panMode");

    harness.handlers.onKeyUp?.(createKeyboardEvent("Space"));
    expect(harness.getMode().type).toBe("none");
    expect(harness.getReadOnly()).toBe(false);
  });

  test("pans with wheel and skips when modifier pressed", () => {
    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(panPlugin()),
      {
        data: {
          size: { width: 100, height: 100 },
          origin: { x: 0, y: 0 },
        },
      }
    );

    harness.handlers.onWheel?.(createWheelEvent({ deltaX: 10, deltaY: 5 }));
    expect(harness.getData().origin).toEqual({ x: -10, y: -5 });

    harness.handlers.onWheel?.(
      createWheelEvent({ deltaX: 10, deltaY: 5, metaKey: true })
    );
    expect(harness.getData().origin).toEqual({ x: -10, y: -5 });
  });

  test("hand mode pans without holding space", () => {
    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(panPlugin()),
      {
        data: {
          size: { width: 100, height: 100 },
          origin: { x: 0, y: 0 },
        },
        contextProperties: {
          isHandActive: () => true,
        },
      }
    );

    harness.handlers.onPointerDown?.(createPointerEvent({ x: 0, y: 0 }));
    expect(harness.getMode().type).toBe("maybePan");

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 10, y: 0 }));
    expect(harness.getMode().type).toBe("panning");

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 20, y: 10 }));
    expect(harness.getData().origin).toEqual({ x: 10, y: 10 });

    harness.handlers.onPointerUp?.(createPointerEvent({ x: 20, y: 10 }));
    expect(harness.getMode().type).toBe("none");
  });
});