jQuery.each([
	'frontend/element_ready/wd_compare_img.default'
], function(index, value) {
	woodmartThemeModule.wdElementorAddAction(value, function() {
		woodmartThemeModule.compareImages();
	});
});

woodmartThemeModule.compareImages = function() {
	var containers = document.querySelectorAll('.wd-compare-img');

	containers.forEach(function(container) {
		addDraggingEvents(container);
	});

	function addDraggingEvents(container) {
		var isDragging = false;

		// Mouse event handlers.
		container.addEventListener('mousedown', function(e) {
			isDragging = true;
			moveSlider(e, container);
		});

		document.addEventListener('mouseup', function() {
			isDragging = false;
		});

		container.addEventListener('mousemove', function(e) {
			if (!isDragging) {
				return;
			}

			moveSlider(e, container);
		});

		// Event handlers for sensory devices.
		container.addEventListener('touchstart', function(e) {
			isDragging = true;
			moveSlider(e.touches[0], container);
		}, {passive: true});
	
		document.addEventListener('touchend', function() {
			isDragging = false;
		}, {passive: true});
	
		container.addEventListener('touchmove', function(e) {
			if (!isDragging) {
				return;
			}

			moveSlider(e.touches[0], container);
		}, {passive: true});
	}

	// Move the slider to the click position or the drag position.
	function moveSlider(e, container) {
		var containerRect = container.getBoundingClientRect();
		var offsetX       = e.clientX - containerRect.left;

		if (offsetX < 0) {
			offsetX = 0;
		}

		if (offsetX > containerRect.width) {
			offsetX = containerRect.width;
		}

		var widthPercentage = ( (offsetX / containerRect.width) * 100).toFixed(3);

		// Update the CSS variable
		container.style.setProperty('--wd-compare-handle-pos', `${widthPercentage}%`);
	}
}

window.addEventListener('load', function() {
	woodmartThemeModule.compareImages();
});