"use strict";
/**
 * @package SP Page Builder
 * @author Unitemplates https://www.unitemplates.com
 * @copyright Copyright (c) 2015 - 20223 Unitemplates
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */

document.addEventListener('DOMContentLoaded', function () {
	const publicAddons = document.querySelectorAll('.ut-addon-image-compare, .ut-carousel-addon');
	utJsAddons(publicAddons);
	utObserveAddons();
});

function utObserveAddons() {
	if(document.querySelector('.com-sppagebuilder.layout-edit-iframe')) {
		const globalObserver = new MutationObserver(function (mutations) {
			mutations.forEach(function (mutation) {
				const targetNode = mutation.target;
				const observedAddons = targetNode.querySelectorAll('.ut-addon-image-compare, .ut-carousel-addon');
				utJsAddons(observedAddons);
			});
		});
		globalObserver.observe(document.body, { childList: true, subtree: true });
	}
}

function utJsAddons(addons){
	if(addons.length > 0){
		addons.forEach(function (addon) {
			if(addon.classList.contains('ut-addon-image-compare')){
				utImageCompareSettings(addon);
			}
			if(addon.classList.contains('ut-carousel-addon')){
				utCarouselSettings(addon);
			}
		});
	}	
}

function utImageCompareSettings(addon) {
	const addon_id = addon.getAttribute('data-id');
	const options = {
		controlColor: (addon.getAttribute('data-control-color')) ? addon.getAttribute('data-control-color') : '#FFFFFF',
		controlShadow: (addon.getAttribute('data-control-shadow') === 'true'), // if no is true, is false
		addCircle: (addon.getAttribute('data-add-circle') === 'true'),
		addCircleBlur: (addon.getAttribute('data-add-circle-blur') === 'true'),
		showLabels: (addon.getAttribute('data-show-labels') === 'true'),
		labelOptions: {
			before: (addon.getAttribute('data-before')) ? addon.getAttribute('data-before') : 'Before',
			after: (addon.getAttribute('data-after')) ? addon.getAttribute('data-after') : 'After',
			onHover: (addon.getAttribute('data-on-hover') === 'true'),
		},
		smoothing: (addon.getAttribute('data-smoothing') === 'true'),
		smoothingAmount: (addon.getAttribute('data-smoothing-amoun')) ? parseInt(addon.getAttribute('data-smoothing-amoun')) : 100,
		hoverStart: (addon.getAttribute('data-hover-start') === 'true'),
		verticalMode: (addon.getAttribute('data-vertical-mode') === 'true'),
		startingPoint: (addon.getAttribute('data-starting-point')) ? parseInt(addon.getAttribute('data-starting-point')) : 50,
	}
	const compare = document.getElementById('image-compare-'+addon_id);
	const viewer = new ImageCompare(compare, options).mount();
}

function utCarouselSettings(carousel) {
	let addon_id = carousel.getAttribute('data-id');

	let config = {
		loop: (carousel.getAttribute('data-loop') === 'true'),// if no is true, is false
		speed: (carousel.getAttribute('data-speed')) ? parseInt(carousel.getAttribute('data-speed')) : 300,
		slidesPerView: (carousel.dataset.slidesPerView === "auto") ?  "auto" : parseInt(carousel.dataset.slidesPerView) || 1,
		allowTouchMove: (carousel.getAttribute('data-allowTouchMove') === 'false') ? false : true, // because default is true
		centeredSlides: (carousel.getAttribute('data-center') === 'true'),
		spaceBetween: (carousel.getAttribute('data-margin')) ? parseInt(carousel.getAttribute('data-margin')) : 30,
	};

	let dots = (carousel.getAttribute('data-dots') === 'true');// if no is true, is false
	let config_dots = {};
	if (dots) {
		config_dots ={
			pagination: {
				el: (carousel.getAttribute('data-dots-ct')) ? carousel.getAttribute('data-dots-ct') : '#ut-carousel-dots-'+addon_id,
				clickable: true,
			}
		}
	};

	let autoplay = (carousel.getAttribute('data-autoplay') === 'true');// if no is true, is false
	let delay = (carousel.getAttribute('data-interval')) ? parseInt(carousel.getAttribute('data-interval')) : 3000;
	let config_autoplay = {};
	if (autoplay) {
		config_autoplay = {
			autoplay: {
				delay: delay,
				pauseOnMouseEnter: (carousel.getAttribute('data-pauseOnMouseEnter') === 'true'),// if no is true, is false
				reverseDirection: (carousel.getAttribute('data-reverseDirection') === 'true'),// if no is true, is false
			}
		}
	};

	let nav = (carousel.getAttribute('data-nav') === 'true');// if no is true, is false
	let config_nav = {};
	if (nav) {
		config_nav = {
			navigation: {
				nextEl: '#ut-carousel-next-'+addon_id,
				prevEl: '#ut-carousel-prev-'+addon_id,
			}
		}
	};
	
	var breakpoints = {};
	function addBreakpoint(minWidth, attributeName) {
		if (carousel.getAttribute(attributeName)) {
			var newBreakpoint = {};
			newBreakpoint[minWidth] = {
				slidesPerView: parseInt(carousel.getAttribute(attributeName))
			};
			breakpoints.breakpoints = breakpoints.breakpoints || {};
			breakpoints.breakpoints = Object.assign({}, breakpoints.breakpoints, newBreakpoint);
		}
	}
	addBreakpoint(0, 'data-items-xs');
	addBreakpoint(576, 'data-items-sm');
	addBreakpoint(768, 'data-items-md');
	addBreakpoint(992, 'data-items-lg');
	addBreakpoint(1200, 'data-items-xl');

	Object.assign(config, config_dots, config_autoplay, config_nav, breakpoints);
	// console.log(JSON.stringify(config));

	// Clone slides before swiper init (used in marquee addons)
	if (carousel.dataset.cloneItems === "true") {
		function cloneItems(){
			const wrapper = carousel.querySelector(".swiper-wrapper");
			const slides = Array.from(wrapper.children); // static copy
			const viewportWidth = carousel.offsetWidth;
			let contentWidth = wrapper.scrollWidth;
			if (config.slidesPerView === 1) {
				if (slides.length === 1) {
					wrapper.appendChild(slides[0].cloneNode(true));
				}
			} else if (config.slidesPerView === "auto" && config.autoplay && config.loop) {
				while (contentWidth < viewportWidth * 2) {
					slides.forEach(slide => {
						wrapper.appendChild(slide.cloneNode(true));
					});
					contentWidth = wrapper.scrollWidth;
				}
			}
		}
		cloneItems();
		// Clone items on resize
		window.addEventListener('resize', function() {
			cloneItems();
		});
	}

	var ut_carousel = new Swiper('#ut-carousel-'+addon_id, config);

	let navCt = carousel.getAttribute('data-nav-ct');
	if(nav && navCt){// outside nav
		const navContainer = document.querySelector(navCt);
		if(navContainer){
			const controls = document.querySelectorAll('#ut-carousel-navigation-' + addon_id + ' > div[id*="ut-carousel-"]');
			if (controls.length > 0) {// chek if exist controls
				while (navContainer.firstChild) {// remove old navs in navContainer
					navContainer.removeChild(navContainer.firstChild);
				}
				controls.forEach(control => {// move original nav to navContainer
					navContainer.appendChild(control);
				});
			}
		}
	}
}