<template>
  <modal :max-width="maxWidth" ref="modal">
    <div class="modal-header">
      <h4 class="modal-title" v-html="title"></h4>
    </div>
    <div class="modal-body" v-html="message"></div>
    <div class="modal-footer">
      <button class="btn" @click.prevent="cancel" v-html="cancelButtonLabel"></button>
      <button class="btn" :class="confirmButtonClass" @click.prevent="action" v-html="confirmButtonLabel"></button>
    </div>
  </modal>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue } from 'vue-property-decorator';
import modal from '../modal.vue';

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

@Component({
  components: {
    modal
  }
})
export default class ConfirmDialog extends Vue {
  @Prop({ type: String, default: 'btn-danger' }) confirmButtonClass!: string;
  @Prop(String) maxWidth!: string;
  @Ref('modal') modal!: modal;

  title = '';
  message = '';
  cancelButtonLabel = defaultValues.confirmButtonLabel;
  confirmButtonLabel = defaultValues.confirmButtonLabel;

  resolve: Function = () => {};
  reject: Function = () => {};

  action() {
    this.modal.hide();
    this.resolve(true);
  }

  cancel() {
    this.modal.hide();
    this.reject();
  }

  confirm(
    title: string,
    message: string,
    confirmButtonLabel: string = defaultValues.confirmButtonLabel,
    cancelButtonLabel: string = defaultValues.cancelButtonLabel
  ) {
    this.title = title;
    this.message = message;
    this.confirmButtonLabel = confirmButtonLabel;
    this.cancelButtonLabel = cancelButtonLabel;
    this.modal.show();
    return new Promise((resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
    });
  }
}
</script>
