import type { PlaitBoard } from "@plait/core";
import type { withEmoji } from "@plait/mind";
import { getXmindMarker } from "@/lib/flow-board/xmind-markers";

/** Use the native marker artwork in Plait's existing emoji geometry and hit targets. */
export function withXmindMarkers(board: PlaitBoard) {
  const markerBoard = board as ReturnType<typeof withEmoji>;
  const renderEmoji = markerBoard.renderEmoji;
  markerBoard.renderEmoji = (container, props) => {
    const marker = getXmindMarker(props.emojiItem.name);
    if (!marker) return renderEmoji(container, props);
    const image = document.createElement("img");
    image.className = "mind-node-emoji xmind-topic-marker";
    image.draggable = false;
    let currentProps = props;
    const update = (next: Partial<typeof props>) => {
      currentProps = { ...currentProps, ...next };
      const current = getXmindMarker(currentProps.emojiItem.name);
      image.src = current?.asset || marker.asset;
      image.alt = current?.name || marker.name;
      image.dataset.markerId = current?.id || marker.id;
      image.style.width = `${currentProps.fontSize}px`;
      image.style.height = `${currentProps.fontSize}px`;
    };
    update(props);
    container.append(image);
    return { update, destroy: () => image.remove() };
  };
  return board;
}