(function($){
	'use strict';

	function positionPopover($popover, $target, placement){
		if(!$target || $target.length === 0){
			$popover.css({ transform:'translate(-9999px,-9999px)'});
			return;
		}
		var rect = $target[0].getBoundingClientRect();
		var popRect = $popover[0].getBoundingClientRect();
		var top = rect.top + window.scrollY;
		var left = rect.left + window.scrollX;
		switch(placement){
			case 'top':
				top = top - popRect.height - 8; left = left + rect.width/2 - popRect.width/2; break;
			case 'right':
				top = top + rect.height/2 - popRect.height/2; left = left + rect.width + 8; break;
			case 'bottom':
				top = top + rect.height + 8; left = left + rect.width/2 - popRect.width/2; break;
			case 'left':
				top = top + rect.height/2 - popRect.height/2; left = left - popRect.width - 8; break;
			default:
				top = top + rect.height + 8; left = left + rect.width/2 - popRect.width/2; break;
		}
		$popover.css({ position:'absolute', top: top + 'px', left: left + 'px', transform:'none' });
	}

	function runTour($root){
		var settings = $root.data('settings') || {};
		var steps = settings.steps || [];
		var index = 0;
		var $overlay = $root.find('.upt-overlay');
		var $popover = $root.find('.upt-popover');
		var $title = $root.find('.upt-title');
		var $body = $root.find('.upt-body');
		var $btnPrev = $root.find('.upt-prev');
		var $btnNext = $root.find('.upt-next');
		var autoplayTimer = null;

		function cleanupHighlight(){ $('.unlockafe-tour-highlight').removeClass('unlockafe-tour-highlight'); }

		function showStep(i){
			if(i < 0 || i >= steps.length){ endTour(); return; }
			index = i;
			var step = steps[i];
			$title.text(step.title || '');
			$body.text(step.content || '');
			cleanupHighlight();
			var $target = step.selector ? $(step.selector).first() : null;
			if($target && $target.length){ $target.addClass('unlockafe-tour-highlight'); }
			positionPopover($popover, $target && $target.length ? $target : $root, step.placement || 'auto');
			$btnPrev.prop('disabled', index === 0);
			$btnNext.text(index === steps.length - 1 ? 'Finish' : 'Next');
			if(settings.autoplay){
				clearTimeout(autoplayTimer);
				autoplayTimer = setTimeout(function(){
					if(index < steps.length - 1){
						maybeRedirect(step, function(){ showStep(index + 1); });
					} else {
						finishFlow();
					}
				}, settings.autoplayDelay || 2500);
			}
		}

		function startTour(){
			if(settings.showOverlay){ $root.addClass('show-overlay'); }
			showStep(0);
		}

		function endTour(){
			cleanupHighlight();
			$root.removeClass('show-overlay');
			$popover.css({ transform:'translate(-9999px,-9999px)'});
			clearTimeout(autoplayTimer);
		}

		function maybeRedirect(step, proceed){
			if(step && step.redirect){
				window.location.href = step.redirect;
				return;
			}
			if(typeof proceed === 'function'){ proceed(); }
		}

		function finishFlow(){
			if(settings.finishRedirect){
				window.location.href = settings.finishRedirect;
				return;
			}
			endTour();
		}

		$btnPrev.on('click', function(){ if(index > 0){ showStep(index - 1); } });
		$btnNext.on('click', function(){
			var step = steps[index] || {};
			if(index < steps.length - 1){
				maybeRedirect(step, function(){ showStep(index + 1); });
			} else {
				finishFlow();
			}
		});
		$root.find('.upt-close').on('click', endTour);
		$(window).on('resize scroll', function(){ showStep(index); });

		startTour();
	}

	$(window).on('elementor/frontend/init', function(){
		var handler = function($scope){
			var $root = $scope.find('.unlockafe-product-tour');
			if($root.length){ runTour($root); }
		};
		elementorFrontend.hooks.addAction('frontend/element_ready/unlockafe-product-tour.default', handler);
	});

})(jQuery);


