<template>
  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
    <template #activator="{ on }">
      <slot name="activator" :on="on"></slot>
    </template>

    <div class="modal-body p-4 text-center">
      <slot>
        <div class="mb-0" v-if="title" v-html="title"></div>
        <p class="mb-0" v-if="message" v-html="message"></p>
      </slot>
    </div>
    <div class="modal-footer flex-nowrap p-0 d-flex">
      <itf-button class="fs-6 text-decoration-none col-6 m-0 rounded-0 border-right justify-content-center" :class="cancelClass" @click="onCancel" v-html="cancelCaption"></itf-button>
      <itf-button class="fs-6 text-decoration-none col-6 m-0 rounded-0 justify-content-center" :class="confirmClass" @click="onConfirm">
        <strong v-html="confirmCaption"></strong>
      </itf-button>
    </div>
  </itf-popover>
</template>
<script>
import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
import itfPopover from './Popover';
import itfButton from '../button/Button';

export default @Component({
  name: 'itfConfirmPopover',
  components: {
    itfPopover,
    itfButton
  },
})
class itfConfirmPopover extends Vue {
  @PropSync('visible') value;
  @Prop({ type: String, default: function() { return this.$t('components.areYouSureToDeleteThis'); } }) title;
  @Prop({ type: String, default: '' }) message;
  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
  @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;

  @Prop({ type: String, default: function() { return this.$t('components.noKeepIt'); } }) cancelCaption;
  @Prop({ type: String, default: function() { return this.$t('components.yesDelete'); } }) confirmCaption;
  @Prop({ type: String, default: '' }) cancelClass;
  @Prop({ type: String, default: 'text-danger' }) confirmClass;

  onConfirm() {
    this.$nextTick(() => this.$emit('confirm'));
    this.$refs.popover.hide();
  }

  onCancel() {
    this.$nextTick(() => this.$emit('cancel'));
    this.$refs.popover.hide();
  }

  show() {
    this.$refs.popover.show();
  }

  hide() {
    this.$refs.popover.hide();
  }
}
</script>
