import { PropOptions } from 'vue';
import { createDecorator } from 'vue-class-component';

// follow up of value-sync-mixin
export function ValueSync(propName: string, options: PropOptions): PropertyDecorator {
  // @ts-ignore
  return createDecorator((componentOptions, key: string) => {
    // Add prop for v-model to Vue instance
    (componentOptions.props || (componentOptions.props = {} as any))[propName] = options;

    // Add computed [key] to Vue instance, which is a copy the value of [propName] (v-model on component).
    (componentOptions.computed || (componentOptions.computed = {}))[key] = {
      get() {
        return (this as any)[propName];
      },
      set(newValue) {
        // @ts-ignore
        this.$emit('input', newValue); // vue syntax: update prop 'value' in the parent
      }
    };
  });
}