let bodyStyles = undefined;
$(document).ready(function(){
    bodyStyles = window.getComputedStyle(document.body);

	$('#yterase').click(function(e){
		tracker.connect(0x10C4, 'erase');
	});

	const intervalSelect2 = setInterval(function(){
		if(typeof $("select").select2 === "function"){
			$("select").select2();
			clearInterval(intervalSelect2);
		}
	}, 200);

    $('.language-item').click(function() {
        const data = {
            lang: $(this).data('lang')
        };
        const urlData = './app/backend/ajax.php?module=update_user_language';
        callWebservice(urlData, 'POST', data, (res) => {
            location.reload();
        });
    });

    // Load icons
    $('i.my-icon').each(async function() {
        loadIcon($(this));
    })
});

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

function initTable(module, aColumns, initCustomTableButtons, sParams) {

	if(sParams != undefined){
		sParams = "&" + sParams;
	}else{
		sParams = "";
	}

	$('#tabla').DataTable({
		"order": [],
		// "language": {
		// 	"url": "./resources/vendor/datatables/es_es.json"
		// },
		"ajax": {
			"url": "./app/backend/ajax.php?module=" + module + "_list" + sParams,
			"dataSrc": ""
		},
		"initComplete":function( settings, json){
			initTableButtons(module, sParams);

			if(initCustomTableButtons != undefined){
				initCustomTableButtons(module, sParams);
			}

		},
		"fnDrawCallback": function( settings ) {
			initTableButtons(module, sParams);

			if(initCustomTableButtons != undefined){
				initCustomTableButtons(module, sParams);
			}

		},
		columns: aColumns
	});

}

const loadIcon = (element) => {
    const bodyStyles = window.getComputedStyle(document.body);
    const attrs = element.attr('class').split(' ');
    const icon = attrs.find((c) => c.includes('svg')).split('icon-svg-')[1];
    const color = attrs.find((c) => c.includes('color')).split('icon-color-')[1];
    const classes = attrs.filter((c) => c.includes('class'));

    const prevId = element.attr('data-icon');
    if (prevId) {
        console.log(prevId);
        console.log($(`svg[data-icon=${prevId}]`));
        $(`svg[data-icon=${prevId}]`).remove();
    }
    const elementId = (new Date()).getTime() + '' + Math.floor(Math.random() * 10**4);

    try {
        fetch(`/resources/images/icons/${icon}.svg`).then(async (r) => {
            if (r.status == 200) {
                const blob = await r.blob();
                const svgContent = await blob.text();
                
                element.after(`
                    ${svgContent}
                `);
                element.attr('data-icon', elementId);
                element.parent().find('svg').attr('data-icon', elementId);

                if (color == 'primary') {
                    element.parent().find('svg').css('fill', bodyStyles.getPropertyValue('--my-primary'));
                } else {
                    element.parent().find('svg').css('fill', bodyStyles.getPropertyValue('--my-text-primary'));
                }

                for (const c of classes) {
                    element.parent().find('svg').addClass(c.split('icon-class-')[1]);
                }
            }
        });
    } catch (error) {
        console.log(error);
    }
}

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 initTableButtons(module, sParams){
	$('.action-edit').unbind('click').click(function(){
		var id = $(this).parent().parent().find('input#id').val();
		location.href= "index.php?app=backend/" + module + "_edit&id=" + id + sParams;
	});

	$('.action-delete').unbind('click').click(function(){
		var id = $(this).parent().parent().find('input#id').val();
		Swal.fire({
		  title: 'Do you want to delete this element?',
		  text: 'This change cannot be reversed.',
		  icon: 'warning',
		  showCancelButton: true,
		  confirmButtonColor: '#d33',
		  cancelButtonColor: '#3085d6',
		  confirmButtonText: 'Delete',
		  cancelButtonText: 'Cancel'
		}).then((result) => {
		  if (result.isConfirmed) {
			  location.href= "index.php?app=backend/" + module + "_delete&id=" + id + sParams;
		  }
		});
	});
}

//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();
				initDatepicker('input.datepicker');

				$('.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);
					}

				});

				$('.add-language').click(function(event) {
					launchLangModal(saveLanguage);
				});

				$('.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: 'Do you want to delete the language?',
		text: "The data from this language will be lost",
		icon: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#d33',
		cancelButtonColor: '#3085d6',
		confirmButtonText: 'Delete',
		cancelButtonText: 'Cancel'
	}).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);
        }
    });

};

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();
}