const listarPersonal = (selectorName) => {
	initSelect2(selectorName, baseURLRest + URI_TRABAJADORES, {title: "nombresapellidos", subtitle: "documentoidentidad"});
};

const listarCargos = () => {
	$(`#cboCargoFiltro`).select2({
		containerCssClass: 'select-xs',
		ajax: {
			url: baseURLRest + URI_CARGOS,
			dataType: `json`,
			delay: 1000,
			data: function (params) {
				return {
					q: params.term, // search term
					page: params.page
				};
			},
			processResults: function (data, params) {
				// parse the results into the format expected by Select2
				// since we are using custom formatting functions we do not need to
				// alter the remote JSON data, except to indicate that infinite
				// scrolling can be used
				params.page = params.page || 1;

				return {
					results: data,
					pagination: {
						more: (params.page * 30) < data.length
					}
				};
			},
			cache: true
		},
		placeholder: `Buscar`,
		allowClear: true,
		escapeMarkup: function (markup) {
			return markup;
		}, // let our custom formatter work
		minimumInputLength: 1,
		templateResult: formatRepo,
		templateSelection: formatRepoSelection
	});

	function formatRepo(repo) {
		if (repo.loading) {
			return repo.text;
		}

		var markup = `
			<div class='select2-result-repository clearfix'>
				<div class='select2-result-repository__title'>${repo.nombre}</div>
			</div>`;

		return markup;
	}

	function formatRepoSelection(repo) {
		if (repo.id) {
			return repo.nombre;
		} else {
			return repo.text;
		}
	}
};

const filtrarPersonalPorCargo = () => {
	let cargo = $("#cboCargoFiltro").select2('data')[0];
	let puestolaboral_id = cargo.id;

	let params = {
		puestolaboral_id
	};


	ajaxWebService.get(URI_TRABAJADORES, {params}).then((response) => {
		debugger
		let html = "";
		let trabajadores = response.data;
		html = trabajadores.map((trabajador) => `<option value="${trabajador.id}">${trabajador.apellidos} ${trabajador.nombres}</option>`);
		$("#lista").append(html);
		$("#lista").trigger('bootstrapDualListbox.refresh', true);

	});
};


const initDualListbox = (nodeIdentifier) => {
	let options = {
		moveOnSelect: false,
		infoText: 'Mostrando todos {0}',
		infoTextFiltered: '<span class="label label-warning">Filtrado</span> {0} de {1}',
		infoTextEmpty: `<span class="text-danger">La lista está vacía</span>`,
		filterPlaceHolder: 'Buscar por nombre',
		filterTextClear: 'Mostrar todos',
		preserveSelectionOnMove: 'moved',
		moveOnSelect: false
	}
	$(nodeIdentifier).bootstrapDualListbox(options);
};

const inicializarInputsModalToleranciaMasiva = () => {
	initDatePicker("#dpFecha");
	listarSedes("#cboSedes");
};

const registrarToleranciaMasiva = () => {
	swal({
		type: 'success',
		title: '¡Se registró la tolerancia masiva!',
		showConfirmButton: false,
		timer: 1500
	})
};


const mostrarModalAsignarTolerancia = () => {
	ajaxModal.get("administrativos/tolerancia/masiva/registroTolerancia.jsp").then((response) => {
		swal({
			title: '<strong>Registro de Tolerancia Masiva</strong>',
//            type: 'info',
			html: response.data,
			showCloseButton: true,
			showCancelButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> Registrar tolerancia',
			confirmButtonAriaLabel: 'Registrar tolerancia',
			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
			cancelButtonAriaLabel: 'Thumbs down',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {
				inicializarInputsModalToleranciaMasiva();
			}
		}).then((result) => {
			if (result.value) {
				registrarToleranciaMasiva();
			}
		});
	});
};

$(() => {
	initDualListbox("#lista");
	listarPersonal("#cboPersonalFiltro");
	listarCargos("#cboCargoFiltro");
	$("#btnAplicarFiltro").click(filtrarPersonalPorCargo);
	$("#btnAsignarTolerancia").click(mostrarModalAsignarTolerancia);
});