/**
 * Global singleton for the right-click style context menu.
 * Any component calls openContextMenu() to display the floating picker,
 * and StyleContextMenu.vue (mounted once in App.vue) renders it.
 */
import { reactive } from 'vue';

export interface ContextMenuItem {
  value: string;
  label: string;
  swatch?: string;        // optional color swatch dot
  emoji?: string;         // optional emoji shown instead of swatch
  isHeader?: boolean;     // non-interactive section heading
  checked?: boolean;      // explicit checkmark (for multi-group menus)
}

interface MenuState {
  visible: boolean;
  x: number;
  y: number;
  title: string;
  items: ContextMenuItem[];
  current: string;
  onSelect: (value: string) => void;
}

const state = reactive<MenuState>({
  visible: false,
  x: 0,
  y: 0,
  title: '',
  items: [],
  current: '',
  onSelect: () => {},
});

export function openContextMenu(opts: {
  x: number;
  y: number;
  title: string;
  items: ContextMenuItem[];
  current: string;
  onSelect: (value: string) => void;
}): void {
  state.visible = true;
  state.x = opts.x;
  state.y = opts.y;
  state.title = opts.title;
  state.items = opts.items;
  state.current = opts.current;
  state.onSelect = opts.onSelect;
}

export function closeContextMenu(): void {
  state.visible = false;
}

export function useContextMenu() {
  return { state };
}