/**
 * Mobile touch fix for image-compare-viewer (frontend enqueue).
 *
 * @package DiviSupreme
 */

/* global ImageCompare */
( function () {
	'use strict';

	/**
	 * Patch ImageCompare.prototype._events to avoid body-scroll-lock scroll jumps on touch.
	 *
	 * @return {boolean}
	 */
	function dsmPatchImageCompareMobileTouch() {
		if ( 'undefined' === typeof ImageCompare || ! ImageCompare.prototype ) {
			return false;
		}

		if ( ImageCompare.prototype.__dsmMobileTouchPatched ) {
			return true;
		}

		ImageCompare.prototype._events = function dsmPatchedIcvEvents() {
			var self = this;
			var el = this.el;
			var control = this.control;

			if ( ! el || ! control ) {
				return;
			}

			var touchDragging = false;
			var touchMoved = false;
			var touchStartX = 0;
			var touchStartY = 0;

			function resetArrowAnimator( offset ) {
				var coords = self.settings.addCircle
					? self.arrowCoordinates.circle
					: self.arrowCoordinates.standard;

				self.arrowAnimator.forEach( function ( arrow, index ) {
					var sign = 0 === index ? 1 : -1;
					var transform = self.settings.verticalMode
						? 'transform: translateY(' +
						  ( offset
								? coords[ 1 ] * sign
								: 0 === index
									? coords[ 0 ]
									: -coords[ 0 ] ) +
						  'px);'
						: 'transform: translateX(' +
						  ( offset
								? coords[ 1 ] * sign
								: 0 === index
									? coords[ 0 ]
									: -coords[ 0 ] ) +
						  'px);';

					arrow.style.cssText = transform;
				} );
			}

			el.addEventListener( 'mousedown', function ( event ) {
				self._activate( true );
				document.body.classList.add( 'icv__body' );
				self._slideCompare( event );
			} );

			el.addEventListener( 'mousemove', function ( event ) {
				if ( self.active ) {
					self._slideCompare( event );
				}
			} );

			el.addEventListener( 'mouseup', function () {
				self._activate( false );
			} );

			document.body.addEventListener( 'mouseup', function () {
				if ( ! self.active ) {
					return;
				}
				document.body.classList.remove( 'icv__body' );
				self._activate( false );
			} );

			control.addEventListener(
				'touchstart',
				function ( event ) {
					touchDragging = true;
					touchMoved = false;
					touchStartX = event.touches[ 0 ].clientX;
					touchStartY = event.touches[ 0 ].clientY;
					self._activate( true );
					self._slideCompare( event );
				},
				{ passive: true }
			);

			el.addEventListener(
				'touchmove',
				function ( event ) {
					if ( ! touchDragging || ! self.active || ! event.touches.length ) {
						return;
					}

					var dx = Math.abs( event.touches[ 0 ].clientX - touchStartX );
					var dy = Math.abs( event.touches[ 0 ].clientY - touchStartY );

					if ( ! touchMoved ) {
						if ( dx < 4 && dy < 4 ) {
							return;
						}
						touchMoved = self.settings.verticalMode ? dy >= dx : dx >= dy;
					}

					if ( touchMoved ) {
						event.preventDefault();
						self._slideCompare( event );
					}
				},
				{ passive: false }
			);

			function onTouchEnd() {
				touchDragging = false;
				touchMoved = false;
				self._activate( false );
			}

			el.addEventListener( 'touchend', onTouchEnd, { passive: true } );
			el.addEventListener( 'touchcancel', onTouchEnd, { passive: true } );

			el.addEventListener( 'mouseenter', function () {
				if ( self.settings.hoverStart ) {
					self._activate( true );
				}
				resetArrowAnimator( true );
			} );

			el.addEventListener( 'mouseleave', function () {
				resetArrowAnimator( false );
			} );
		};

		ImageCompare.prototype.__dsmMobileTouchPatched = true;
		return true;
	}

	dsmPatchImageCompareMobileTouch();
} )();
