"use strict";

/**
 * Модуль "Полноценные Комментарии D7" под Битрикс
 * Официальный сайт модуля: www.realcommenter.com
 * Официальный сайт разработчика: burlaka.studio
 * Автор и разработчик: Алексей Бурлака (AlexeyGfi) -> alexeygfi@gmail.com
 */
/**
 * Drag&Fire
 * Author: alexeygfi@gmail.com
 *
 * ver.2019-03-26
 */
/**
 * @param obj_or_css_selector Строка-css-селектор либо объект
 *
 * @param prop_name  = left | right | ... - какое свойство отслеживаем. left по-умолчанию
 *          TODO - дело в том, что иногда, когда смещение не достаточно сильное, нужно пропускать слайс на объект
 *          и он должен смещаться. Например, дёрнули слайдер, но недостаточно сильно и он как бы сдвигается,
 *          а потом возвращается обратно. Вот для этого нужно механизму знать, как элемент позиционируется
 *          через left, right, margin-left...
 *
 * @param reverse_calculate = false | true - добавляем или отнимаем (например, для right движение мыши на увеличение даёт отрицательный прирост)
 *          false по-умолчанию
 *
 * @param allow_direction  = PLUS | MINUS | PLUS&MINUS - В какую сторону позволено. PLUS - только на увеличение (например, для правой панели нужно только прирост, чтобы махнуть пальцем вправо и спрятать.)
 *
 * @param critical_shift = какое смещение считается критическим и сработает колбэк. По-умолчанию: 75
 *
 * @param critical_EVENT какая функция вызывается в случае срабатывания критического смещения
 *
 * @returns {boolean}
 */

function drag_and_fire (
	obj_or_css_selector,
	prop_name,
	reverse_calculate,
	allow_direction,
	critical_shift,
	critical_EVENT
) {
	
	let obj= null;
	
	if ( typeof obj_or_css_selector === 'object' ) {
		obj= obj_or_css_selector;
	} else {
		obj= document.querySelector( obj_or_css_selector );
	}
	
	if ( !obj ) {
		return false;
	}
	
	if ( !prop_name ) {
		prop_name= 'left';
	}
	
	if ( !reverse_calculate ) {
		reverse_calculate= false;
	}
	
	if ( !allow_direction ) {
		allow_direction= 'PLUS&MINUS';
	}
	
	if ( !critical_shift ) {
		critical_shift= 75;
	}
	
	if ( !critical_EVENT ) {
		critical_EVENT= null;
	}
	
	obj.drag_prop_name= prop_name; 
	obj.drag_reverse_calculate= reverse_calculate; 
	obj.drag_allow_direction= allow_direction; 
	obj.drag_critical_shift= critical_shift; 
	obj.drag_critical_EVENT= critical_EVENT; 
	obj.fire_in_air= false;
	
	//inner functions
	obj.fire_drag_critical_reached= fire_drag_critical_reached;
	obj.fire_drag_clear_states= fire_drag_clear_states;
	obj.fire_get_drag_shift= fire_get_drag_shift;
	obj.fire_event= fire_event;
	obj.fire_clear= fire_clear;
	
	//drag events
	obj.ontouchmove= fire_dragmode_show;
	obj.ontouchend= fire_drag_result;
	obj.ontouchcancel= fire_drag_cancel;
	
	obj.drag_start_value= null;
}

function fire_dragmode_show( evt ) {
	
	let obj= this;
	let e= evt || event;
	let touch = e.touches[0] || e.changedTouches[0];
	
	if ( obj.fire_in_air ) {
		return false;
	}

	/**
	 * Если у нас старт движения
	 */
	if ( typeof obj.drag_start_value === 'undefined' || obj.drag_start_value === null ) {
		obj.drag_start_value= parseFloat( getStyle( obj, obj.drag_prop_name ) );
		obj.pageX= touch.pageX;
		obj.pageY= touch.pageY;
	}
	
	obj.touch_page_x= touch.pageX;
	
	let drag_shift= obj.fire_get_drag_shift();
	
	if ( !obj.fire_drag_critical_reached() ) {
		//if ( !obj.fire_in_air ) {
			// TODO: Здесь как раз можно реализовать "допустимое смещение". Когда потянул, но fire ещё не сработал
			//obj.style[ obj[ 'drag_prop_name' ] ]= parseFloat( obj.drag_start_value + drag_shift )+'px';
		//}
	} else {
		return false;
	}
	
	return true;
	
}

function fire_drag_result() {
	this.fire_drag_critical_reached( true, true );
	this.fire_drag_clear_states();
}

function fire_drag_cancel () {
	this.fire_drag_critical_reached( true );
	this.fire_drag_clear_states();
}

function fire_get_drag_shift() {
	let obj= this;
	
	if (
		typeof obj.touch_page_x === 'undefined'
		|| typeof obj.pageX === 'undefined'
		|| typeof obj.drag_start_value === 'undefined'
		|| obj.drag_start_value === null
	) {
		return 0;
	}
	
	let drag_shift= obj.touch_page_x-obj.pageX;
	
	if (
		( drag_shift > 0 && !~obj.drag_allow_direction.indexOf( 'PLUS' ) )
		||
		( drag_shift < 0 && !~obj.drag_allow_direction.indexOf( 'MINUS' ) )
	) {
		drag_shift= 0;
	}
	
	if ( obj.drag_reverse_calculate ) {
		drag_shift*= -1;
	}

	obj.drag_shift= drag_shift;
	return drag_shift;
}

function fire_drag_critical_reached( allow_to_shift_in_default, fire_allowed ) {
	
	let obj= this;
	let drag_shift= Math.abs( obj.fire_get_drag_shift() );

	if ( drag_shift < obj.drag_critical_shift ) {
		//if ( allow_to_shift_in_default ) {
			// TODO: Возврат/релиз "допустимого" смещения
			//obj.style[ obj[ 'drag_prop_name' ] ]= parseFloat( obj.drag_start_value )+'px';
		//}
	} else {
		
		this.fire_in_air= true;

		if ( fire_allowed ) {
			this.fire_drag_clear_states();
			this.fire_event();
		}
		
		return true;
	}
	
	return false;
	
}

function fire_event() {
	let obj= this;
	
	if ( obj.drag_critical_EVENT && obj.drag_critical_EVENT instanceof Function ) {
		setTimeout( function() { this.drag_critical_EVENT( this ); }.bind( obj ), 50 );
	}
	this.fire_clear();
}

function fire_clear() {
	this.fire_drag_clear_states();
	this.fire_in_air= false;
}


function fire_drag_clear_states() {
	this.drag_start_value= null;
}

/**
 * get style
 *
 * @param el
 * @param styleProp
 * @returns {*}
 */

function getStyle( el, styleProp ) {

	let value, defaultView = (el.ownerDocument || document).defaultView;

	// W3C standard way:
	if ( defaultView && defaultView.getComputedStyle ) {
		// sanitize property name to css notation
		// (hypen separated words eg. font-Size)
		styleProp = styleProp.replace( /([A-Z])/g, "-$1" ).toLowerCase();
		return defaultView.getComputedStyle( el, null ).getPropertyValue( styleProp );

	} else if ( el.currentStyle ) { // IE
		// sanitize property name to camelCase
		styleProp = styleProp.replace( /\-(\w)/g, function ( str, letter ) {
			return letter.toUpperCase();
		} );
		value = el.currentStyle[ styleProp ];
		// convert other units to pixels on IE
		if ( /^\d+(em|pt|%|ex)?$/i.test( value ) ) {
			return (function ( value ) {
				let oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
				el.runtimeStyle.left = el.currentStyle.left;
				el.style.left = value || 0;
				value = el.style.pixelLeft + "px";
				el.style.left = oldLeft;
				el.runtimeStyle.left = oldRsLeft;
				return value;
			})( value );
		}
		return value;
	}
}