import $ from 'jquery'
import { Flexy, adjustContainerHeightFor } from 'flexy'
import ctEvents from 'ct-events'
import { getCurrentScreen } from '../frontend/helpers/current-screen'

import { pauseVideo, maybePlayAutoplayedVideo } from './helpers/video'

export const mount = (sliderEl, args) => {
	// sliderEl = sliderEl.parentNode

	if (sliderEl.flexy) {
		return
	}

	let maybePillsSlider = sliderEl.querySelector('.flexy-pills [data-flexy]')

	let leftArrow = sliderEl.querySelector('.flexy .flexy-arrow-prev')
	let rightArrow = sliderEl.querySelector('.flexy .flexy-arrow-next')


	const maybeSuggested = sliderEl.closest('.ct-suggested-products')

	if (maybeSuggested) {
		leftArrow = maybeSuggested.querySelector('.ct-arrow-prev')
		rightArrow = maybeSuggested.querySelector('.ct-arrow-next')
	}

	const inst = new Flexy(sliderEl.querySelector('.flexy-items'), {
		flexyAttributeEl: sliderEl,
		elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
		adjustHeight: !!sliderEl.querySelector('.flexy-items').dataset.height,

		...(args.event ? { initialDragEvent: args.event } : {}),

		autoplay:
			Object.keys(sliderEl.dataset).indexOf('autoplay') > -1 &&
			parseInt(sliderEl.dataset.autoplay, 10)
				? sliderEl.dataset.autoplay
				: false,

		...(sliderEl.querySelector('.flexy-pills')
			? {
					pillsContainerSelector:
						sliderEl.querySelector('.flexy-pills')
							.firstElementChild,
			  }
			: {}),
		leftArrow,
		rightArrow,
		scaleRotateEffect: false,

		onDragStart: (e) => {
			if (!e.target.closest('.flexy-items')) {
				return
			}

			Array.from(
				e.target.closest('.flexy-items').querySelectorAll('.zoomImg')
			).map((img) => {
				$(img).stop().fadeTo(120, 0)
			})
		},

		// viewport | container
		wrapAroundMode:
			sliderEl.dataset.wrap === 'viewport' ? 'viewport' : 'container',

		...(maybePillsSlider
			? {
					pillsFlexyInstance: maybePillsSlider,
			  }
			: {}),

		onSlideChange: (instance, payload) => {
			ctEvents.trigger('blocksy:frontend:flexy:slide-change', {
				instance,
				payload,
			})
		},
	})

	if (maybePillsSlider) {
		const inst = new Flexy(maybePillsSlider, {
			elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
			// viewport | container
			wrapAroundMode:
				maybePillsSlider.dataset.wrap === 'viewport'
					? 'viewport'
					: 'container',

			leftArrow:
				maybePillsSlider.parentNode.querySelector('.flexy-arrow-prev'),
			rightArrow:
				maybePillsSlider.parentNode.querySelector('.flexy-arrow-next'),
			hasDragAndDrop: false,

			...(maybePillsSlider.closest('.thumbs-left') &&
			getCurrentScreen({ withTablet: true }) !== 'mobile'
				? {
						orientation: 'vertical',
				  }
				: {}),
		})

		maybePillsSlider.flexy = inst
	}

	sliderEl.flexy = inst
}

ctEvents.on('ct:flexy:update-height', () => {
	;[...document.querySelectorAll('.flexy-container')].map((el) => {
		if (!el.flexy) {
			return
		}

		adjustContainerHeightFor(el.flexy)
	})
})