import { createCanvasPlugin } from "./baseCanvas";
import {
  BaseContextProperties,
  ElementProperties,
  HighlightableProperties,
  ScreenPointProperties,
} from "./contextProperties";
import { NoneMode } from "./PluginSystem";

export type HighlightMode = NoneMode;

export type HighlightData = {
  highlightedElementId: string | undefined;
};

export interface HighlightContextProperties<CanvasElement>
  extends BaseContextProperties<HighlightMode, HighlightData>,
    ScreenPointProperties,
    ElementProperties<CanvasElement>,
    HighlightableProperties<CanvasElement> {}

export function highlightPlugin<CanvasElement>() {
  return createCanvasPlugin({
    name: "highlight",
    data: {
      highlightedElementId: undefined,
    },
    handlers: (context: HighlightContextProperties<CanvasElement>) => ({
      onPointerMove(event) {
        const mode = context.getMode();

        if (mode.type !== "none") return;

        const point = context.getCanvasPoint(event.nativeEvent);
        const elements = context.filterElements({
          at: point,
          predicate: context.isHighlightable,
        });
        const firstElementId =
          elements.length > 0 ? context.getElementId(elements[0]) : undefined;

        const data = context.getData();

        if (firstElementId !== data.highlightedElementId) {
          context.setData({ ...data, highlightedElementId: firstElementId });
        }
      },
      onPointerLeave() {
        const mode = context.getMode();

        if (mode.type !== "none") return;

        const data = context.getData();

        if (data.highlightedElementId) {
          context.setData({ ...data, highlightedElementId: undefined });
        }
      },
    }),
  });
}