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

describe("marquee plugin", () => {
  test("selects elements within marquee region", () => {
    const elements = [
      { id: "in", rect: { x: 0, y: 0, width: 5, height: 5 } },
      { id: "out", rect: { x: 20, y: 20, width: 5, height: 5 } },
    ];

    const harness = createTestCanvas(
      (canvas) => canvas.addPlugins(marqueePlugin<(typeof elements)[number]>()),
      {
        data: { selectedElementIds: [] },
        contextProperties: {
          getElementId: (item: (typeof elements)[number]) => item.id,
          isSelectable: () => true,
          filterElements: (options) => filterElements(elements, options),
        },
      }
    );

    harness.handlers.onPointerDown?.(createPointerEvent({ x: 0, y: 0 }));
    harness.handlers.onPointerMove?.(createPointerEvent({ x: 5, y: 5 }));
    harness.handlers.onPointerMove?.(createPointerEvent({ x: 5, y: 5 }));

    expect(harness.getMode().type).toBe("marquee");
    expect(harness.getData().selectedElementIds).toEqual(["in"]);

    harness.handlers.onPointerUp?.(createPointerEvent({ x: 5, y: 5 }));
    expect(harness.getMode().type).toBe("none");
    expect(harness.getData().selectedElementIds).toEqual(["in"]);
  });

  test("click without movement selects anchor point and supports adjustMarqueeRegion", () => {
    const elements = [{ id: "click", rect: { x: 2, y: 2, width: 1, height: 1 } }];
    const adjustedRegions: any[] = [];

    const harness = createTestCanvas((canvas) => canvas.addPlugins(marqueePlugin<typeof elements[number]>()), {
      data: { selectedElementIds: [] },
      contextProperties: {
        getElementId: (item: typeof elements[number]) => item.id,
        isSelectable: () => true,
        filterElements: (options) => filterElements(elements, options),
        adjustMarqueeRegion: (_event, region) => {
          adjustedRegions.push(region);
          return region;
        },
      },
    });

    harness.handlers.onPointerDown?.(createPointerEvent({ x: 2, y: 2 }));
    harness.setMode({
      type: "marquee",
      region: harness.getData().pointerDown!,
      selectedElementIdsSnapshot: [],
    });
    harness.handlers.onPointerUp?.(createPointerEvent({ x: 2, y: 2 }));

    expect(harness.getData().selectedElementIds).toEqual(["click"]);
    expect(adjustedRegions.length).toBeGreaterThan(0);
  });
});