import Scrollbar from 'smooth-scrollbar'

const smooth = {
	data() {
		return {
			smooth: {
				scrollbar: null,
				elements: [],
				cachedElements: []
			}
		}
	},
	mounted() {
		if (!this.$device.isMobileOrTablet) this.$_smooth_init()
	},
	destroy() {
		if (!this.$device.isMobileOrTablet) this.$_smooth_destroy()
	},
	methods: {
		$_smooth_listener() {
			this.smooth.scrollbar.addListener((status) => {
				this.$_smooth_run()
			})
		},
		$_smooth_setCache() {
			this.smooth.elements = this.$refs.scrollbar.querySelectorAll('[data-scroll]')

		    this.smooth.elements.forEach((el) => {
		      if (el.offsetTop < window.innerHeight) return

		      const cachedElement = {
		        element: el,
		        animation: el.dataset.scroll,
		        timeline: null,
		        triggerOffset: el.dataset.offset || 0.25,
		        isTriggered: false
		      }

		      this.smooth.cachedElements.push(cachedElement)
		    })
		},
		$_smooth_setAnimationState(el) {
			el.timeline = new TimelineLite({ paused: true })

			el.timeline
				.from(el.element, 1, {
					y: 100,
					autoAlpha: 0,
					ease: Expo.easeOut
				})

			el.timeline.progress(1).progress(0)
		},
		$_smooth_run() {
			this.smooth.cachedElements.forEach((el) => {
				if (el.isTriggered) return

				if (this.smooth.scrollbar.isVisible(el.element)) {
					el.timeline.play()
					el.isTriggered = true
				}
			})
		},
		$_smooth_destroy() {
			this.smooth.scrollbar.destroy()
		},
		$_smooth_init() {
			this.smooth.scrollbar = Scrollbar.init(this.$refs.scrollbar)
			this.$_smooth_setCache()
			this.smooth.cachedElements.forEach((el) => this.$_smooth_setAnimationState(el))
			this.$_smooth_listener()
		}
	}
}

export default smooth