<template>
  <modal ref="modal">
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
    </div>
    <div class="modal-body">{{message}}</div>
    <div class="modal-footer">
      <button class="btn" @click.prevent="cancel">{{cancelButtonLabel}}</button>
      <button class="btn btn-danger" @click.prevent="action">{{confirmButtonLabel}}</button>
    </div>
  </modal>
</template>

<script>
const defaultValues = {
  confirmButtonLabel: 'Ja, verwijderen',
  cancelButtonLabel: 'Nee, annuleren'
};

import modal from '../modal.vue';

export default {
  data() {
    return {
      title: '',
      message: '',
      cancelButtonLabel: defaultValues.confirmButtonLabel,
      confirmButtonLabel: defaultValues.confirmButtonLabel
    };
  },
  methods: {
    confirm: function(title, message, confirmButtonLabel, cancelButtonLabel) {
      this.title = title;
      this.message = message;
      this.confirmButtonLabel = confirmButtonLabel || defaultValues.confirmButtonLabel;
      this.cancelButtonLabel = cancelButtonLabel || defaultValues.cancelButtonLabel;
      this.$refs.modal.show();

      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    }.doc('Toon het confirmatie-dialoog, geeft een promise terug.', ['Confirm demo', 'Dit is een test!']),
    action() {
      this.$refs.modal.hide();
      this.resolve(true);
    },
    cancel() {
      this.$refs.modal.hide();
      this.reject();
    },
  },
  components: {
    modal,
  },
};
</script>
