<template>
  <div>
    <slot name="activator" :on="{ click: onClick }" :loading="loading">
      <itf-button
        icon
        :disabled="loading || disabled"
        :loading="loading"
        @click.stop.prevent="onClick"
      >
        <itf-icon name="trash" />
      </itf-button>
    </slot>

    <itf-modal :visible.sync="isModalShown" @keyup.native.enter="onConfirm">
      <div slot="content" class="modal-content rounded-3 shadow itf-append-context">
        <div class="modal-body p-4 pb-3 text-center">
          <slot>
            <h5 class="mb-1">{{ title }}</h5>
            <p class="mb-0">{{ message }}</p>
          </slot>
        </div>
        <div class="modal-footer flex-nowrap p-0">
          <button
            type="button"
            class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0"
            data-bs-dismiss="modal"
            @click="$emit('cancel')"
          >
            <span v-html="cancelCaption"></span>
          </button>
          <button
            type="button"
            class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end fw-bold"
            :class="confirmClass"
            @click="onConfirm"
            :disabled="confirmDisabled"
          >
            <span v-html="deleteCaption"></span>
          </button>
        </div>
      </div>

    </itf-modal>
  </div>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import itfModal from './Modal.vue';

export default @Component({
  components: {
    itfIcon,
    itfButton,
    itfModal
  }
})
class itfDeleteConfirmModal extends Vue {
  @Prop(Boolean) loading;
  @Prop({ type: Boolean, default: false }) disabled;
  @Prop({ type: Boolean, default: false }) confirmDisabled;
  @Prop({ type: String, default: 'text-danger' }) confirmClass;
  @Prop({ type: String, default () { return this.$t('components.popover.noKeepIt'); } }) cancelCaption;
  @Prop({ type: String, default () { return this.$t('components.popover.yesDelete'); } }) deleteCaption;
  @Prop({ type: String, default () { return this.$t('components.popover.confirmDelete'); } }) title;
  @Prop({ type: String, default () { return this.$t('components.popover.areYouSureToDeleteThis'); } }) message;

  isModalShown = false;

  onClick() {
    this.isModalShown = true;
  }

  onConfirm() {
    this.isModalShown = false;
    this.$nextTick(() => {
      this.$emit('delete');
    });
  }
}
</script>
