import { registerModule } from '../../core/modules';
import { emitAsukaEvent, emitAsukaEventCancelable } from '../../core/events';
import { useAsukaStore } from '../../store/asukaStore';

/**
 * RulerActionModule
 * ----------------
 * "Action-only" module: clicking its menu button toggles the ruler overlay.
 * The ruler is rendered as an HTML/canvas overlay (not a Fabric object), so it
 * does not affect export/import, snapshots, or printing.
 */
registerModule({
  id: 'ruler',
  label: 'Ruler',
  icon: 'ruler',
  // No overlay by default — if someone opens it explicitly, it will show nothing.
  displayMode: 'floating',
  supportedEngines: ['fabric'],
  requiredCapabilities: ['canvas2d'],
  render: () => null,
  action: () => {
    const ok = emitAsukaEventCancelable('before:ui.ruler.interact', {});
    if (!ok) return;

    const state = useAsukaStore.getState() as any;
    const enabled = Boolean(state.rulerEnabled);
    state.setRulerEnabled?.(!enabled);

    emitAsukaEvent('after:ui.ruler.interact', { enabled: !enabled });
  },
});
