import media from '../helpers/media'
export default class LogosClass {
	constructor () {
		this.componentInit()

		document.addEventListener('swup:animation:out:end', this.componentDestroy.bind(this))
		document.addEventListener('swup:content:replace', this.componentInit.bind(this))
	}

	componentInit () {
		this.$component = $('.logo-showcase')

		if (this.$component.length) {
			this.setElements()
			this.setEvents()
		}
	}

	componentDestroy () {
		if (this.$component.length) {
			this.unsetEvents()
			this.unsetElements()
			cancelAnimationFrame(this.raf)

			this.$component = null
		}
	}

	setElements () {
		this.FRICTION = 1
		this.VELOCITY = 0.5

		this.scrollOffset = 0
		this.velocity = { target: this.VELOCITY, current: this.VELOCITY }
		this.progress = []
		this.raf = null

		this.$rows = this.$component.find('.logo-showcase__logos__row')

		this.onRaf = this.onRaf.bind(this)
		this.onResize = this.onResize.bind(this)

		this.isTablet = media.isTablet()

		setTimeout(() => {
			this.isTablet = media.isTablet()
		}, 200)
	}

	unsetElements () {
		this.$logoRows = null
	}

	setEvents () {
		this.raf = requestAnimationFrame(this.onRaf)

		this.$rows.each((index, element) => {
			this.onResize($(element))
		})

		$(window).on('resize', () => {
			this.isTablet = media.isTablet()
		})
	}

	unsetEvents () {

	}

	onRaf() {
		if (!this.$rows.length) return

		this.raf = requestAnimationFrame(this.onRaf)

		this.velocity.target *= this.FRICTION

		if (this.velocity.target > 0) this.velocity.target = Math.max(this.VELOCITY, this.velocity.target)
		else this.velocity.target = Math.min(this.VELOCITY * -1, this.velocity.target)

		if(!this.isTablet) {
			this.scrollOffset += (window.scrollY - this.scrollOffset) * 0.1
			if(this.scrollOffset.toFixed(1) !== window.scrollY.toFixed(1)) {
				const scrollVelocity = Math.abs((window.scrollY - this.scrollOffset)) * 0.02
				if(scrollVelocity > this.VELOCITY) this.velocity.target = scrollVelocity
				if(scrollVelocity > 8.8) this.velocity.target = 8.8
			}
		}

		this.velocity.current = this.velocity.current * (1 - 0.2) + 0.2 * this.velocity.target



		this.$rows.each((index, element) => {
			const direction = 1

			if(!this.progress[index]) this.progress[index] = 0

			this.progress[index] += this.velocity.current / $(element).data('total-columns')

			if (this.progress[index] < -100) this.progress[index] = this.progress[index] + 100
			else if (this.progress[index] > 0) this.progress[index] = this.progress[index] - 100

			let progress = this.progress[index]

			if (progress < -100) progress = progress + 100;
			else if (progress > 0) progress = progress - 100;

			$(element).find('.logo-showcase__logos__column').each((index, element) => {
				element.style.transform = `translate3d(${progress * direction}%, 0, 0)`
			})
		})

	}

	onResize($row) {
		const rowRect = $row[0].getBoundingClientRect()
		let $column = $row.find('.logo-showcase__logos__column')
		const columnRect = $column[0].getBoundingClientRect()

		if( rowRect.width < 1 || columnRect.width < 1 ) return

		const quantity = Math.ceil(rowRect.width / columnRect.width) + 1

		let columns = []
		while( columns.length < quantity ) {
			const columnCopy = $column.clone()
			columns.push(columnCopy)
			$row.append(columnCopy)
		}

		$.event.trigger({ type: 'clientColumnsAdded'})
	}
}
