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

const orders_status = {
	pending: {
		id: 1,
		color: 'text-teal-400'
	},
	processing: {
		id: 2,
		color: 'text-yellow-400'
	},
	shipped: {
		id: 3,
		color: 'text-green-400'
	},
	pendingPayment: {
		id: 7,
		color: 'text-red-400'
	},
	readyForShipping: {
		id: 10,
		color: 'text-blue-400'
	},
};

$(document).ready(function () {

	displayCartCount();

	ageVerification();

	$('#search').click(function (e) {
		$('#form-search').submit();
	})

	$("#search-dropdown").on('keyup', function (e) {
		if (e.key === 'Enter' || e.keyCode === 13) {
			$('#search').click();
		}
	});

	$('.cat-element').click(function (e) {
		catId = $(this).data('catid');
		$('#catId').val(catId);
		const catName = $(this).find('.cat-name').text();
		$('.cat-element.active').removeClass('bg-gray-600');
		$('.cat-element').removeClass('active');
		$(this).addClass('active bg-gray-600');
		$('#dropdown-button span').text(catName);
		$('#search').click();
	});

	// const menuDropdown = $('#user_menu_dropdown');
	// $('#user_menu').click(function(){

	// 	if($(menuDropdown).hasClass('hidden')){
	// 		$(menuDropdown).removeClass('hidden');
	// 	} else {
	// 		$(menuDropdown).addClass('hidden');
	// 	}
	// });
	$('#user_login').click(function () {
		location.href = "index.php?app=backend/login/index"
	})

	$('#hamburger').click(function () {
		$('#sidemenu').animate({ width: 'toggle' }, 250);
	});

	$('#browsetoggle').click(function () {
		$('#menucategories').slideToggle();
	});

});

function getColorStatus(status_id) {
	let color = 'text-white';
	for (const [key, value] of Object.entries(orders_status)) {
		if (value.id == status_id) color = value.color;
	}
	return color;
}

function getIsAdult() {
	return localStorage.getItem('isAdult') ?? false;
}

function setIsAdult(param) {
	return localStorage.setItem('isAdult', param);
}

function ageVerification() {

	const isAdult = getIsAdult();

	if (isAdult) {
		// Si ya ha verificado su edad, no hacemos nada.
		$('.age-verification').removeClass('age-verification');
		$('.blur-2xl').removeClass('blur-2xl');
		return;
	}

	$('.age-verification').bind('click.ageverification', function (event) {
		const element = $(this);

		event.preventDefault();
		const elementType = element[0].tagName;

		Swal.fire({
			title: 'Age Verification',
			html: 'Please, verify your age.',
			icon: 'warning',
			showDenyButton: true,
			showCancelButton: false,
			customClass: {
				confirmButton: 'bg-[--green] text-black px-4 py-2 m-3',
				denyButton: 'bg-[--red] text-white px-4 py-2 m-3'
			},
			buttonsStyling: false,
			confirmButtonText: `i am over 18`,
			denyButtonText: `i am under 18`,
		}).then((result) => {
			/* Read more about isConfirmed, isDenied below */
			if (result.isConfirmed) {
				setIsAdult('true');
				$('.blur-2xl').removeClass('blur-2xl');
				$('.age-verification').removeClass('age-verification').unbind('click.ageverification');
			} else if (result.isDenied) {

			}
		})
	});

};

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

}

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

	$('.action-delete').click(function () {
		var id = $(this).parent().parent().find('input#id').val();
		Swal.fire({
			title: '¿Desea eliminar el elemento?',
			text: "El cambio no se podrá revertir.",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#d33',
			cancelButtonColor: '#3085d6',
			confirmButtonText: 'Eliminar',
			cancelButtonText: 'Cancelar'
		}).then((result) => {
			if (result.isConfirmed) {
				location.href = "index.php?app=backend/" + module + "_delete&id=" + id;
			}
		});
	});
}

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

};