var sActionButtons = '<a href="javascript:void(0);" class="btn text-muted action-edit" title="Edit"><i class="fas fa-pencil-alt"></i></a><a href="javascript:void(0);" class="btn text-danger action-delete" title="Delete"><i class="fas fa-trash"></i></a>';

$(document).ready( () => {
	$('.menu-desktop a').click(function() {
		const enlace = this;
		if($(enlace).data("url") != undefined && $(enlace).data("url") != ""){
			const datosTracker = {};
			const urlAccess = "./app/backend/ajax.php?module=horizontal_active&id=" + $(enlace).data("id");
			callWebservice(urlAccess, "get", datosTracker, (response) =>{
				location.href = $(enlace).data("url");
			});
		}else{
			location.href = $(enlace).attr("href");
		}

	});

	$('a[data-widget="pushmenu"]').click(function(){
		//El + convierte el localstorage a entero, ya que solo puede almacenar cadenas
		if (+getCookie("sidebar-collapse")) {
			setCookie("sidebar-collapse", 0, 365);
		} else {
			setCookie("sidebar-collapse", 1 ,365);
		}
	});

	$('a[data-widget="pushmenu"]').on('shown.lte.pushmenu', function() {
		$('#tabla').DataTable().columns.adjust();
	});
	$('a[data-widget="pushmenu"]').on('collapsed.lte.pushmenu', function() {
		$('#tabla').DataTable().columns.adjust();
	});

	setSelect2();

});

function setSelect2(){
	$( "select" ).each(function( index ) {
		if (!$(this).data('select2')) {
			let options = {};
			if($(this).find('option').length < 5){
				options.minimumResultsForSearch = -1;
			}
			$(this).select2(options);
		}
	});
}

function replaceUrlParam(url, paramName, paramValue)
{
    if (paramValue == null) {
        paramValue = '';
    }
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

const callWebservice = (url, type, datos, callBack) => {
	var jqxhr = $.ajax({
		url: 	url,
		type: 	type,
		data: 	datos
	})
	.done(function(response) {
		callBack(response);
	})
	.fail(function(error) {
		console.log( error );
	})
	.always(function() {
	});
};

function initTable(module, aColumns, callback, baseUrl){

	if(baseUrl == undefined){
		baseUrl = "backend/";
	}

	const table = $('#tabla').DataTable({
		deferRender:    true,
		scrollY:        'calc(99vh - 280px)',
		scroller: {
			rowHeight: 41,
			loadingIndicator: true,
		},
		// stateSave:      true,
		"order": [],
		/*
		"language": {
			"url": "./resources/vendor/datatables/es_es.json"
		},
		*/
		"ajax": {
			"url": "./app/backend/ajax.php?module=" + module + "_list",
			"dataSrc": ""
		},
		"initComplete": function(settings, json){
			initTableButtons(module, baseUrl);
			$('#tabla tbody tr').dblclick(function(e) {
				console.log(e.target);
		        if ($(e.target).is(':not(input[type=checkbox])') && $(e.target).is(':not(a)') && $(e.target).is(':not(i)')) {
		            $(this).find('.action-edit').click();
		        }
		    });
			if(callback != undefined){
				const tableTemp = settings.oInstance.api();
				callback(tableTemp);
			}
		},
		columns: aColumns
	});
}

// Función genérica de filtrado de tablas
const selectFields = ['iot_type', 'groups', ];
const booleanFields = ['is_geolocation', 'is_active'];

function initTableFilters(fields, col_size=4) {
	const table = $('#tabla').DataTable();
	// Reset every filter
	table.columns().search('').draw();
	// Add the filters and its events
	if (fields.length == 1) {
		const filterHtml = `
		<a href="javascript:void(0);" class="btn btn-primary clear_filters mb-1"><i class="fas fa-times fa-sm mr-1"></i>Clear Filters</a>
		`;
	    $('input[type=search]').addClass('field_filter');
	    $('input[type=search]').attr('data-id', '0');
		$('#tabla_filter').append(filterHtml);

		$('.clear_filters').click(function() {
	        $('.field_filter[type=search]').val('').keyup();
	    });

	    $('.field_filter[type=search]').keyup(function() {
	        if ($(this).val() != "") {
	            table.column(parseInt($(this).data('id'))).search($(this).val()).draw();
	        } else {
	            table.column(parseInt($(this).data('id'))).search('').draw();
	        }
	    });
	} else {
		let filterHtml = `
		<a href="javascript:void(0);" class="btn btn-primary clear_filters mb-2"><i class="fas fa-times fa-sm mr-1"></i>Clear Filters</a>
		<a href="javascript:void(0);" class="btn btn-primary activate_filters mb-2"><i class="fas fa-plus fa-sm mr-1"></i>Filter Data</a>
		<div class="row filter_list">
		`;

		$('#tabla_filter').html(filterHtml);
		$('.filter_list').hide();
		initTableFiltersRec(fields, 0, col_size);
	}
}

function initTableFiltersRec(fields, index, col_size) {
	const table = $('#tabla').DataTable();
	if (index < fields.length) {
		const title = $(table.column(index).header()).text();
		let filterHtml = `<div class="col-md-${col_size}">`;
		if (selectFields.includes(fields[index])) {
			const urlData = `./app/backend/ajax.php?module=${fields[index]}_list`;
			callWebservice(urlData, "post", {}, (response) => {
				const elements = JSON.parse(response);
				filterHtml += `<label>${title}: <select class="field_filter" data-id="${index}">`;
				filterHtml += `<option value="">All</option>`;
				elements.forEach(function(el) {
					filterHtml += `<option value="${el.name}">${el.name}</option>`;
				});
				filterHtml += `</select></label></div>`;
				$('#tabla_filter .filter_list').append(filterHtml);
				initTableFiltersRec(fields, index + 1, col_size);
			});
		} else if (booleanFields.includes(fields[index])) {
			filterHtml += `<label><span>${title}: </span><select class="field_filter custom-select" data-id="${index}">
				<option value="">All</option>
				<option value="0">Inactive</option>
				<option value="1">Active</option>
			</select></label></div>`;
			$('#tabla_filter .filter_list').append(filterHtml);
			initTableFiltersRec(fields, index + 1, col_size);
		} else if (fields[index] == 'is_db_connection') {
			filterHtml += `<label><span>${title}: </span><select class="field_filter custom-select" data-id="${index}">
				<option value="">All</option>
				<option value="0">Unavailable</option>
				<option value="1">Available</option>
			</select></label></div>`;
			$('#tabla_filter .filter_list').append(filterHtml);
			initTableFiltersRec(fields, index + 1, col_size);
		} else if (fields[index] != 'id') {
			filterHtml += `<label>${title}:<input type="text" class="field_filter" data-id="${index}"/></label></div>`;
			$('#tabla_filter .filter_list').append(filterHtml);
			initTableFiltersRec(fields, index + 1, col_size);
		} else {
			initTableFiltersRec(fields, index + 1, col_size);
		}
	} else {
		$('#tabla_filter').append('</div>');

		$('.activate_filters').click(function() {
			if ($('.filter_list').is(':visible')) {
				$('.filter_list').hide();
				$('.activate_filters i').removeClass('fa-minus').addClass('fa-plus');
			} else {
				$('.filter_list').show();
				$('.activate_filters i').removeClass('fa-plus').addClass('fa-minus');
			}
			setSelect2();
		});

		$('.clear_filters').click(function() {
			$('.field_filter[type=text]').val('').keyup();
			$('select.field_filter').val('').change();
			table.columns().search('').draw();
		});
		$('.field_filter[type=text]').keyup(function() {
			if ($(this).val() != "") {
				table.column(parseInt($(this).data('id'))).search($(this).val()).draw();
			} else {
				table.column(parseInt($(this).data('id'))).search('').draw();
			}
		});

		$('select.field_filter').change(function() {
			if ($(this).parent().find('span').text() == 'DB Connection:') {
				$('#tabla').DataTable().column(2).search('').draw();
				if ($(this).val() != "") {
					const ids = $('td i.fa-plug.' + (($(this).val() == 1)? 'text-green' : 'text-danger') + '').map(function() {return '^' + $(this).data('id') + '$'}).get().join('|');
					$('#tabla').DataTable().column(2).search(ids, regex=true).draw();
				}
			} else {
				if ($(this).val() != "") {
					table.column(parseInt($(this).data('id'))).search('^' + $(this).val() + '$', true, false, false).draw();
				} else {
					$('#tabla').DataTable().column($(this).data('id')).search('').draw();
				}
			}
		});
	}
}

function initTableButtons(module, baseUrl){

	if(baseUrl == undefined){
		baseUrl = "backend/";
	}

	$('.action-edit').click(function(){
		var id = $(this).parent().parent().find('input#id').val();
		location.href= "index.php?app=" + baseUrl + module + "_edit&id=" + id;
	});

	$('.action-delete').click(function(){
		var id = $(this).parent().parent().find('input#id').val();
		Swal.fire({
		  title: 'Do you want to delete the element? ',
		  text: "The change cannot be reversed. ",
		  icon: 'error',
		  showCancelButton: true,
		  confirmButtonColor: '#d33',
		  cancelButtonColor: '#3085d6',
		  confirmButtonText: 'Delete',
		  cancelButtonText: 'Cancel'
		}).then((result) => {
		  if (result.isConfirmed) {
			  location.href= "index.php?app=" + baseUrl + module + "_delete&id=" + id;
		  }
		});
	});
	/*
	$('table tbody tr').click(function(e){
		if($(this).find("input[type=checkbox]").is(":checked")){
			$(this).find("input[type=checkbox]").attr("checked", false);
		}else {
			$(this).find("input[type=checkbox]").attr("checked", true);
		}
		e.stopPropagation();
	});
	*/
}

//Función generica de guardado de formulario
function initForm(urlBack){
	$('.form-save').click(function(){
		if(validate("datos")){
			$('form#datos').submit();
		}
	});

	$('.form-cancel').click(function(){
		location.href = urlBack;
	});

}

function redirect(urlBack){
	location.href = urlBack;
}

function validate(form){
	form = form.replace("#","");
	var form = document.getElementById(form);
	pristine = new Pristine(form);
	var valid = pristine.validate();
	return valid;
}

function initTextEditor(){
	tinymce.remove();
	tinymce.init({
		selector:'textarea',
		languaje:'es',
		height:	350,
		branding: false,
		menubar: false,
		plugins: [
		    "link image media filemanager responsivefilemanager"
	    ],
		toolbar1: "undo redo | bold italic underline | forecolor backcolor | link unlink | image media | code",
		external_filemanager_path:"filemanager/",
		filemanager_title:"Responsive Filemanager" ,
		external_plugins: {
			"responsivefilemanager": "../../js/tinymce/plugins/responsivefilemanager/plugin.min.js",
			"filemanager": "../../../filemanager/plugin.min.js"
		},
	});
}

//Definimos un obj con todos los metodos de la gestión por idiomas.
let formLanguage = {};

//Definimos las tres variables necesarias para la gestion del formulario de idiomas
formLanguage.module_get 	= '';
formLanguage.module_save 	= '';
formLanguage.module_delete 	= '';
formLanguage.form_name 		= '';
formLanguage.id 			= 0;

//Función que obtiene la información de la bd de contenido
formLanguage.getContent = ( language ) => {

	//Mostramos la ventana de contenido, mostramos la ventana de cargando y ocultamos la ventana de información mientras cargamos.
	$('#form-content-info').hide();
	$('#form-content-loading').show();
	$('#form-content-info div#datos').html('');

	let datos = {
		'id' : formLanguage.id
	};

	//Si pasamos un language, generamos el form añadiendo un nuevo idioma.
	if(language){
		datos.language = language;
	}

	$.ajax({
        url: './app/backend/ajax.php?module=' + formLanguage.module_get,
        type: "post",
        data: datos ,
        success: function (response) {
			if( response ){

				$('#form-content-info').show();
				$('#form-content-loading').hide();
				$('#form-content-info div#datos').html(response);
				initTextEditor();

				$('.form-cancel').unbind('click').bind("click", (e) =>{
					redirect(url_back);
				});

				$('.form-save').unbind('click').bind('click', (e) =>{
					if(validate(formLanguage.form_name)){
						formLanguage.saveContent();
						setTimeout(function(){
							redirect(url_back);
						}, 500);
					}

				});

				$('.delete-language').click(function(event) {
					//Obtenemos el idioma del objeto html que le hemos
					const lang = $(this).attr('id').replace('-delete','');
					formLanguage.deleteLanguage( lang );
				});

			}
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

};

//Función que guarda la información en la bd por idiomas
formLanguage.saveContent = () => {

	//Actualizamos los textarea con la información de los editores.
	tinymce.triggerSave();

	//Serializamos el form, con el nombre que hemos definido en la clase ajax.
	const postdata = $(formLanguage.form_name).serialize();

	const datos = {
		'id' : formLanguage.id,
		postdata
	};

	$.ajax({
        url: './app/backend/ajax.php?module=' + formLanguage.module_save,
        type: "post",
        data: datos ,
        success: function (response) {
			//Asignamos el id a la variable id creada, sólo si es insert
			if( formLanguage.id == 0 ){
				formLanguage.id = response;
			}
			console.log(formLanguage.id);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

};

//Eliminar un idioma creado
formLanguage.deleteLanguage = ( language ) => {
	Swal.fire({
		title: '¿Desea eliminar el idioma?',
		text: "Se perderán los datos asociados a ese idioma.",
		icon: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#d33',
		cancelButtonColor: '#3085d6',
		confirmButtonText: 'Eliminar',
		cancelButtonText: 'Cancelar'
	}).then((result) => {
		if (result.isConfirmed) {
			formLanguage.deleteLanguageContent(language);
		}
	});
};

//Función que elimina la información en la bd
formLanguage.deleteLanguageContent = ( language ) => {

	formLanguage.saveContent();
	const datos = {
		'id' : formLanguage.id,
		language
	};

	$.ajax({
        url: './app/backend/ajax.php?module=' + formLanguage.module_delete,
        type: "post",
        data: datos ,
        success: function (response) {
			formLanguage.getContent();
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

};


// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

function initDatepicker(selector, hours, defaultDate){

	let format 		= "DD/MM/YYYY HH:mm";
	let timePicker 	= false;

	if(hours == undefined){
		hours 		= true;
		timePicker 	= true;
	}

	if(!hours){
		format = "DD/MM/YYYY";
	}

	let options = {
		"singleDatePicker": true,
		"autoApply":		true,
		"timePicker": 		timePicker,
		"timePicker24Hour":	true,
		"locale": {
			"format" 	: format,
			"separator"	: " - ",
			"applyLabel": "Aceptar",
			"cancelLabel": "Cancel",
			"fromLabel": "Desde",
			"toLabel": "Hasta",
			"customRangeLabel": "Custom",
			"weekLabel": "S",
			"daysOfWeek": [
				"Do",
				"Lu",
				"Ma",
				"Mi",
				"Ju",
				"Vi",
				"Sa"
			],
			"monthNames": [
				"Enero",
				"Febrero",
				"Marzo",
				"Abril",
				"Mayo",
				"Junio",
				"Julio",
				"Agosto",
				"Septiembre",
				"Octubre",
				"Noviembre",
				"Diciembre"
			],
			"firstDay": 1
		}
	};

	if(defaultDate != undefined){
		options.startDate = defaultDate;
	}
	//console.log(options);
	$(selector).daterangepicker(options);
}

function formatDate(oDate){
	var currentdate = new Date(oDate);
    return ((currentdate.getDate() < 10)?"0":"") + currentdate.getDate() +"/"+(((currentdate.getMonth()+1) < 10)?"0":"") + (currentdate.getMonth()+1) +"/"+ currentdate.getFullYear();
}

function formatTime(oDate){
	var currentdate = new Date(oDate);
	return ((currentdate.getHours() < 10)?"0":"") + currentdate.getHours() +":"+ ((currentdate.getMinutes() < 10)?"0":"") + currentdate.getMinutes() +":"+ ((currentdate.getSeconds() < 10)?"0":"") + currentdate.getSeconds();
}