import { describe, expect, test } from "bun:test";
import { highlightPlugin } from "../plugins/highlightPlugin";
import { filterElements } from "../utils/elementUtils";
import { createPointerEvent, createTestCanvas } from "./canvasTestUtils";

describe("highlight plugin", () => {
  test("highlights elements on hover and clears on leave", () => {
    const element = { id: "h1", rect: { x: 0, y: 0, width: 20, height: 20 } };

    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(highlightPlugin<typeof element>()),
      {
        contextProperties: {
          getElementId: (item: typeof element) => item.id,
          isHighlightable: () => true,
          filterElements: (options) => filterElements([element], options),
        },
      }
    );

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 10, y: 10 }));
    expect(harness.getData().highlightedElementId).toBe("h1");

    harness.handlers.onPointerLeave?.(createPointerEvent({}));
    expect(harness.getData().highlightedElementId).toBeUndefined();
  });

  test("ignores highlights when mode is not none or not highlightable", () => {
    const element = { id: "h1", rect: { x: 0, y: 0, width: 20, height: 20 } };

    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(highlightPlugin<typeof element>()),
      {
        mode: { type: "busy" as any },
        contextProperties: {
          getElementId: (item: typeof element) => item.id,
          isHighlightable: () => false,
          filterElements: (options) => filterElements([element], options),
        },
      }
    );

    harness.handlers.onPointerMove?.(createPointerEvent({ x: 10, y: 10 }));
    expect(harness.getData().highlightedElementId).toBeUndefined();
  });
});