import Vue from 'vue'

let timerId = null
let isShowTitle = false
let titleNode = null

Vue.directive('title', {
  bind: function (el, binding) {
    if (!binding.value) {
      return
    }
    el.addEventListener('mousemove', function(e) {
      if (!isShowTitle) {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
          isShowTitle = true

          titleNode = document.createElement('div')

          titleNode.style.position = 'fixed',
          titleNode.style.zIndex = 100,
          titleNode.style.backgroundColor = '#191A1C'
          titleNode.style.borderRadius = '2px'
          titleNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
          titleNode.style.padding = '2px 6px'
          titleNode.style.fontSize = '12px'
          titleNode.style.color = 'rgba(255, 255, 255, 0.6)'
          titleNode.innerText = binding.value
          titleNode.style.left = e.clientX + 11 + 'px'
          titleNode.style.top = e.clientY + 18 + 'px'

          document.body.appendChild(titleNode)

          if (e.clientX + 11 + titleNode.offsetWidth > document.documentElement.clientWidth) {
            titleNode.style.left = document.documentElement.clientWidth - titleNode.offsetWidth + 'px'
          }
          if (e.clientY + 18 + titleNode.offsetHeight > document.documentElement.clientHeight) {
            titleNode.style.top = document.documentElement.clientHeight - titleNode.offsetHeight + 'px'
          }
        }, 500);
      }
    }, {
      passive: false,
    })
    el.addEventListener('mouseleave', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
    el.addEventListener('mousedown', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
    el.addEventListener('keydown', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
    el.addEventListener('scroll', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
    el.addEventListener('dragover', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
    el.addEventListener('dragleave', function () {
      if (!isShowTitle) {
        clearTimeout(timerId)
      } else {
        isShowTitle = false
        document.body.removeChild(titleNode)
      }
    })
  },
})