import { computed } from "vue"
import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
import { $store } from "@racletteCore"

export default (statePath: string | string[], dispatchType: string) => {
  const { state } = useStateSubscriber(statePath)

  return <T>(property: string) =>
    computed<T>({
      get: () => state.value[property],
      set: async (newValue: T) =>
        await $store.dispatch({
          type: dispatchType,
          payload: { [property]: newValue },
        }),
    })
}
