<template>
  <popper ref="popper" class="uif-poptip" transition="fade" v-model="visible" :modifiers="modifiers"
          :placement="placement" :popperClass="popperClass"
          :transfer="transfer" :width="width" :disabled="hoverTrigger || disabled"
          @mouseenter.native="handleMouseenter" @mouseleave.native="handleMouseleave">
    <template v-slot:reference><slot></slot></template>
    <template v-slot:popper>
      <div class="popper-arrow" data-popper-arrow></div>
      <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
        <slot name="content">
          <div class="uif-poptip-popper-text">{{content}}</div>
        </slot>
      </div>
    </template>
  </popper>
</template>
<script>
import {oneOf} from '@uif/core/lib/utils/assist'
import Popper from '@uif/core/lib/components/popper'
import {addAttr} from '@uif/core/lib/utils/object'

export default {
  name: 'u-poptip',
  components: {
    Popper
  },
  props: {
    trigger: {
      validator (value) {
        return oneOf(value, ['click', 'hover'])
      },
      default: 'click'
    },
    placement: {
      validator (value) {
        return oneOf(value, ['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'])
      },
      default: 'top'
    },
    transfer: {
      type: Boolean,
      default: false
    },
    content: {
      type: [String, Number],
      default: ''
    },
    width: {
      type: [String, Number]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    invert: {
      type: Boolean,
      default: false
    },
    classes: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      timer: 0,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8]
          }
        }
      ]
    }
  },
  computed: {
    hoverTrigger () {
      return this.trigger === 'hover'
    },
    popperClass () {
      const classes = {'uif-poptip-popper-invert': this.invert}
      addAttr(classes, this.classes, this.classes)
      return [
        'uif-poptip-popper',
        classes
      ]
    }
  },
  watch: {
    value (value) {
      if (this.visible !== value) {
        this.visible = value
      }
    },
    visible (visible) {
      if (this.value !== visible) {
        this.$emit('input', visible)
      }
    }
  },
  mounted () {
    if (this.value) {
      this.visible = true
    }
  },
  methods: {
    handleMouseenter () {
      if (!this.disabled && this.hoverTrigger) {
        this.removeTimer()
        this.timer = setTimeout(() => {
          this.visible = true
        }, 100)
      }
    },
    handleMouseleave () {
      if (!this.disabled && this.hoverTrigger) {
        this.removeTimer()
        this.timer = setTimeout(() => {
          this.visible = false
        }, 200)
      }
    },
    removeTimer () {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = 0
      }
    },
    update () {
      this.$refs.popper.update()
    }
  }
}
</script>
