const flo_arrow_right =
		'<div class="flo-slick-slider-block-next-arrow" id="icon-arrow-right"><i class="gbp-icon-sl-arrow-right"></i></div>',
	flo_arrow_left =
		'<div class="flo-slick-slider-block-prev-arrow" id="icon-arrow-left"><i class="gbp-icon-sl-arrow-left"></i></div>';

jQuery(document).ready(function ($) {
	$('.slick-slider-block-slider').each(function () {
		var slider_id = jQuery(this).data('slider_id');

		$(this)
			.on('init', function () {
				setElementsColor(slider_id, 0); // set the color for the first slide

				// initially the slider is hidden because it jumps when  shows up
				// there fore we hide it and  then show after 1 sec when the slides are properly loaded
				setTimeout(() => {
					jQuery(this).removeClass('flo-hidden');
				}, 1000);
			})
			.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
				// set the proper color for the decorative line
				setElementsColor(slider_id, nextSlide);
			})
			.on('init afterChange', function (event, slick, currentSlide) {
				// update the counter
				if (typeof currentSlide !== 'undefined') {
					jQuery(
						'.flo-slick-slider-block-slider[data-slider_id=' + slider_id + ']'
					)
						.parents('.flo-slick-slide-container')
						.find('.flo_slick__current-index')
						.text(currentSlide + 1);

					// on fancybox closing(when closing the embeded video)
					// restart autoplay if it was enabled
					setTimeout(() => {
						if ($('.flo-video-button').length) {
							$('.flo-video-button').fancybox({
								afterClose: function (instance) {
									const floSlider = jQuery(instance.$trigger)
										.parents('.flo-slick-slide-container')
										.find('.slick-slider-block-slider');
									if (floSlider.data('slick-autoplay')) {
										floSlider.slick('slickPlay');
									}
								},

								// eslint-disable-next-line no-unused-vars
								afterShow: function (instance, _current) {
									const floSlider = jQuery(instance.$trigger)
										.parents('.flo-slick-slide-container')
										.find('.slick-slider-block-slider');
									floSlider.slick('slickPause');
								},
							});
						}
					}, 500);
				}

				// call the custom lazy loading
				preloadImages(slider_id, currentSlide);
			})
			.slick({
				nextArrow: flo_arrow_right,
				prevArrow: flo_arrow_left,
				customPaging: function (slider, i) {
					return jQuery('<a class="slider-dot" />').text(i + 1);
				},
				rows: 0,
				arrows: $(this).data('slick-arrows'),
				dots: $(this).data('slick-dots'),
				adaptiveHeight: $(this).data('slick-adaptiveheight'),
				autoplay: $(this).data('slick-autoplay'),
				autoplaySpeed: $(this).data('slick-autoplayspeed'),
				centerMode: $(this).data('slick-centermode'),
				centerPadding: $(this).data('slick-centerpadding'),
				cssEase: $(this).data('slick-cssease'),
				draggable: $(this).data('slick-draggable'),
				fade: $(this).data('slick-fade'),
				focusOnSelect: $(this).data('slick-focusonselect'),
				easing: $(this).data('slick-easing'),
				edgeFriction: $(this).data('slick-edgefriction'),
				infinite: $(this).data('slick-infinite'),
				//infinite: false,
				initialSlide: $(this).data('slick-initialslide'),
				pauseOnFocus: $(this).data('slick-pauseonfocus'),
				pauseOnHover: $(this).data('slick-pauseonhover'),
				pauseOnDotsHover: $(this).data('slick-pauseondotshover'),
				//slidesToShow: $(this).data("slick-slidestoshow"),
				slidesToScroll: $(this).data('slick-slidestoscroll'),
				speed: $(this).data('slick-speed'),
				swipe: $(this).data('slick-swipe'),
				swipeToSlide: $(this).data('slick-swipetoslide'),
				touchMove: $(this).data('slick-touchmove'),
				touchThreshold: $(this).data('slick-touchthreshold'),
				useCSS: $(this).data('slick-usecSS'),
				useTransform: $(this).data('slick-usetransform'),
				variableWidth: $(this).data('slick-variablewidth'),
				//variableWidth: false,
				vertical: $(this).data('slick-vertical'),
				verticalSwiping: $(this).data('slick-verticalswiping'),
				lazyLoad: 'ondemand',
				responsive: [
					{
						breakpoint: 768,
						settings: {
							slidesToShow: 1,
							slidesToScroll: 1,
						},
					},
				],
			});
	});

	/**
	 * Set the correct color for the decorative line
	 */
	function setElementsColor(slider_id, slideIndex) {
		const currentSlide = jQuery(
			'.flo-slick-slider-block-slider[data-slider_id=' +
				slider_id +
				'] .slick-slider-block-slide[data-slick-index=' +
				slideIndex +
				']'
		);
		var next_sl_elems_color = currentSlide.data('elements_color');

		if (typeof next_sl_elems_color !== 'undefined') {
			// set the proper color for the decorative line
			jQuery(`.flo-slick-slider-block-slider[data-slider_id="${slider_id}"]`)
				.parents('.flo-slick-slide-container')
				.find(
					'.decorative-line, .slick-arrow, .flo_slick__counter, .flo-slide-content--wrapper'
				)
				.attr('style', '--elements_color:' + next_sl_elems_color);

			// inserting the slide content in the content wrapper
			const nextSlideTitle = currentSlide.attr('data-slide-title');
			const nextDataTitle = currentSlide.attr('data-title');
			const nextSlideDescription = currentSlide.attr('data-slide-description');
			const nextSlideVideoEmbed = currentSlide.attr('data-slide-videoEmbed');

			if (nextDataTitle) {
				jQuery(`.flo-slick-slider-block-slider[data-slider_id="${slider_id}"]`)
					.parents('.flo-slick-slide-container')
					.find('.flo-slide-content--wrapper .title-block')
					.html(nextSlideTitle);
			} else {
				jQuery(`.flo-slick-slider-block-slider[data-slider_id="${slider_id}"]`)
					.parents('.flo-slick-slide-container')
					.find('.flo-slide-content--wrapper .title-block > *')
					.remove();
			}

			jQuery(`.flo-slick-slider-block-slider[data-slider_id="${slider_id}"]`)
				.parents('.flo-slick-slide-container')
				.find('.flo-slide-content--wrapper .flo-slide-description')
				.html(nextSlideDescription);

			jQuery(`.flo-slick-slider-block-slider[data-slider_id="${slider_id}"]`)
				.parents('.flo-slick-slide-container')
				.find('.flo-slide-content--wrapper .video-embed-wrapper')
				.html(nextSlideVideoEmbed);
		}
	}

	setTimeout(() => {
		var touchstartX = 0;
		var touchendX = 0;

		var swipeZone = document.getElementsByClassName(
			'flo-slide-content--wrapper'
		);

		if (swipeZone.length) {
			Array.prototype.forEach.call(swipeZone, function (swipeZoneElement) {
				swipeZoneElement.addEventListener(
					'touchstart',
					function (event) {
						touchstartX = event.changedTouches[0].screenX;
					},
					false
				);

				swipeZoneElement.addEventListener(
					'touchend',
					function (event) {
						touchendX = event.changedTouches[0].screenX;
						handleGesure(swipeZoneElement);
					},
					false
				);
			});
		}

		function handleGesure(swipeZoneElement) {
			if (touchendX < touchstartX) {
				jQuery(swipeZoneElement)
					.parents('.flo-slick-slide-container')
					.find('.flo-slick-slider-block-next-arrow')
					.click();
			}

			if (touchendX > touchstartX) {
				jQuery(swipeZoneElement)
					.parents('.flo-slick-slide-container')
					.find('.flo-slick-slider-block-prev-arrow')
					.click();
			}
		}
	}, 200);
});

function preloadImages(slider_id, currentSlide) {
	if (typeof currentSlide === 'undefined') {
		currentSlide = 0;
	}
	const nextSlide = currentSlide + 1;
	const prevSlide = currentSlide - 1;

	const nextSlideImg = jQuery(
		'.flo-slick-slider-block-slider[data-slider_id="' + slider_id + '"]'
	)
		.find('[data-slick-index="' + nextSlide + '"]')
		.find('img');

	const prevSlideImg = jQuery(
		'.flo-slick-slider-block-slider[data-slider_id="' + slider_id + '"]'
	)
		.find('[data-slick-index="' + prevSlide + '"]')
		.find('img');

	if (nextSlideImg.hasClass('lazypreload')) {
		nextSlideImg.removeClass('lazypreload');
		nextSlideImg.addClass('lazyload');
	}

	if (prevSlideImg.hasClass('lazypreload')) {
		prevSlideImg.removeClass('lazypreload');
		prevSlideImg.addClass('lazyload');
	}
}
