<template>
  <span>
    <slot name="activator"></slot>
    <div style="display: none"><div ref="tooltip"><slot></slot></div></div>
  </span>
</template>
<script>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import tippy from 'tippy.js';

export default @Component({
  name: 'itfTooltip',
  components: {
  }
})
class itfTooltip extends Vue {
  @Prop({ type: String, default: 'bottom', validator: (value) => [
      'bottom-start', 'bottom-end', 'bottom',
      'right-start', 'right-end', 'right',
      'left-start', 'left-end', 'left',
      'top-start', 'top-end', 'top'
    ].includes(value) }) placement;
  @Prop({ type: [Number, String], default: 500 }) openDelay;
  @Prop({
    type: String,
    default: 'itfin',
    validator: (value) => ['itfin', 'nomi-light'].includes(value),
  }) theme;

  mounted() {
    if (typeof document === 'undefined') {
      return;
    }
    this.tooltip = tippy(this.$el, {
      content: this.$refs.tooltip,
      allowHTML: true,
      theme: this.theme,
      interactive: true,
      delay: this.openDelay,
      placement: this.placement,
      appendTo: document.body,
    });
  }

  @Watch('placement')
  onPlacementChange(val) {
    this.tooltip?.setProps({ placement: val });
  }

  @Watch('theme')
  onThemeChange(val) {
    this.tooltip?.setProps({ theme: val });
  }

  @Watch('openDelay')
  onDelayChange(val) {
    this.tooltip?.setProps({ delay: val });
  }

  beforeDestroy() {
    this.forceDestroy();
  }

  hide() {
    this.tooltip?.hide();
  }

  forceDestroy() {
    this.tooltip?.destroy();
    this.tooltip = null;
  }
}
</script>
