import { useSyncExternalStore } from "react"

/**
 * Minimal external store for values the viewer emits at pointer-move / camera-change rate (CAD coordinates,
 * zoom %). Keeping them out of App state means only the small readout re-renders, not the whole screen.
 */
export type ValueStore<T> = {
  get: () => T
  set: (value: T) => void
  subscribe: (listener: () => void) => () => void
}

export function createValueStore<T>(initial: T): ValueStore<T> {
  let value = initial
  const listeners = new Set<() => void>()
  return {
    get: () => value,
    set: (next) => {
      if (Object.is(next, value)) return
      value = next
      listeners.forEach((l) => l())
    },
    subscribe: (listener) => {
      listeners.add(listener)
      return () => {
        listeners.delete(listener)
      }
    },
  }
}

export function useValueStore<T>(store: ValueStore<T>): T {
  return useSyncExternalStore(store.subscribe, store.get, store.get)
}