import { DirectiveBinding } from 'vue/types/options'
import { VNode } from 'vue/types/vnode'
import throttle from 'lodash/throttle'
import { isFunction } from 'element-ui/lib/utils/types'

const getPositionSize = (el: any, prop: keyof HTMLElement) => {
  return el === window || el === document ? document.documentElement[prop] : el[prop]
}

const getClientHeight = (el: any) => {
  return getPositionSize(el, 'clientHeight')
}

const scope = 'LoadMore'

const handleScroll = function (this: any, cb: Function) {
  let shouldTrigger = false

  const { wrapper, vm } = this[scope]
  const scrollBottom = wrapper.scrollTop + getClientHeight(wrapper)
  shouldTrigger = wrapper.scrollHeight - scrollBottom <= 0

  if (shouldTrigger && isFunction(cb)) {
    cb.call(vm)
  }
}

export const LoadMore = {
  inserted(el: any, binding: DirectiveBinding, vnode: VNode) {
    const cb = binding.value
    const vm = vnode.context
    // only include vertical scroll
    const wrapper = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    wrapper.style.overflowY = 'auto'

    const onScroll = throttle(handleScroll.bind(el, cb), 200)

    el[scope] = { wrapper, vm, onScroll }

    if (wrapper) {
      wrapper.addEventListener('scroll', onScroll)
    }
  },
  unbind(el: any) {
    const { wrapper, onScroll } = el[scope]
    if (wrapper) {
      wrapper.removeEventListener('scroll', onScroll)
    }
  },
}