// adapted from
// https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
import Vue from 'vue';

class ModalStore {
  constructor(data = {}) {
    this.vm = new Vue({
      data: () => ({
        component: '',
        payload: {}
      })
    });
  }

  get state() {
    return this.vm.$data;
  }
}

const ModalPlugin = {
  install(Vue, options) {
    const store = new ModalStore({});

    const reset = () => {
      store.state.component = '';
      store.state.payload = {};
    };

    Vue.prototype.$modal = {
      state: store.state,
      component: store.state.component,
      payload: store.state.payload,
      open: (component, payload) => {
        store.state.payload = payload;
        store.state.component = component;
        return new Promise((resolve, reject) => {
          this._resolve = resolve;
          this._reject = reject;
        });
      },
      confirm: (res) => {
        reset();
        this._resolve(res);
      },
      cancel: () => {
        reset();
        this._reject();
      },
      _resolve: () => {
      },
      _reject: () => {
      },
    };
  }
};

export default ModalPlugin;