const vueSticky = {}
let listenAction
vueSticky.install = Vue => {
    Vue.directive('sticky', {
        inserted(el, binding) {
            const params = binding.value || {}
            const stickyTop = params.stickyTop || 0
            const zIndex = params.zIndex || 1000
            const elStyle = el.style

            elStyle.position = '-webkit-sticky'
            elStyle.position = 'sticky'
            // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
            // if (~elStyle.position.indexOf('sticky')) {
            //     elStyle.top = `${stickyTop}px`;
            //     elStyle.zIndex = zIndex;
            //     return
            // }
            const elHeight = el.getBoundingClientRect().height
            const elWidth = el.getBoundingClientRect().width
            elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

            const parentElm = el.parentNode || document.documentElement
            const placeholder = document.createElement('div')
            placeholder.style.display = 'none'
            placeholder.style.width = `${elWidth}px`
            placeholder.style.height = `${elHeight}px`
            parentElm.insertBefore(placeholder, el)

            let active = false

            const getScroll = (target, top) => {
                const prop = top ? 'pageYOffset' : 'pageXOffset'
                const method = top ? 'scrollTop' : 'scrollLeft'
                let ret = target[prop]
                if (typeof ret !== 'number') {
                    ret = window.document.documentElement[method]
                }
                return ret
            }

            const sticky = () => {
                if (active) {
                    return
                }
                if (!elStyle.height) {
                    elStyle.height = `${el.offsetHeight}px`
                }

                elStyle.position = 'fixed'
                elStyle.width = `${elWidth}px`
                placeholder.style.display = 'inline-block'
                active = true
            }

            const reset = () => {
                if (!active) {
                    return
                }

                elStyle.position = ''
                placeholder.style.display = 'none'
                active = false
            }

            const check = () => {
                const scrollTop = getScroll(window, true)
                const offsetTop = el.getBoundingClientRect().top
                if (offsetTop < stickyTop) {
                    sticky()
                } else {
                    if (scrollTop < elHeight + stickyTop) {
                        reset()
                    }
                }
            }
            listenAction = () => {
                check()
            }

            window.addEventListener('scroll', listenAction)
        },

        unbind() {
            window.removeEventListener('scroll', listenAction)
        }
    })
}

export default vueSticky