import { Ref, ref, computed, SetupContext, ComputedRef, WritableComputedRef } from "vue";

export const contextForDetachedVModel = <
  T extends Record<string, any>,
  K extends keyof T
>(
  props: T,
  ctx: SetupContext<any>
) => {
  function detachedVModel<M = T[K]>(
    /** the v-model property in props */
    vmodel: K
  ): WritableComputedRef<M> {
    const _sidecar: Ref<M> = ref(props[vmodel]);
    return computed({
      get: () => (props[vmodel as K] !== undefined ? props[vmodel as K] : _sidecar.value),
      set: (v) => {
        if (props[vmodel as K] !== undefined) {
          ctx.emit(`update:${vmodel}`, v);
        } else {
          _sidecar.value = v;
        }
      },
    });
  }

  return detachedVModel;
};