let listaSedes = [];
let handsonTable;

// This example creates a date editor that will show MM/YYYY
const TA_EDITOR_HORA = Handsontable.editors.TextEditor.prototype.extend();

TA_EDITOR_HORA.prototype.createElements = function () {
	Handsontable.editors.TextEditor.prototype.createElements.apply(this, arguments);

	// You need to require/import the "inputmask" library
	var im = new Inputmask('99:99');

	// Create password input and update relevant properties
	this.TEXTAREA = document.createElement('input');
	this.TEXTAREA.setAttribute('type', 'text');
	this.TEXTAREA.className = 'text';
	im.mask(this.TEXTAREA);
	this.textareaStyle = this.TEXTAREA.style;
	this.textareaStyle.width = 0;
	this.textareaStyle.height = 0;

	// Replace textarea with password input
	Handsontable.dom.empty(this.TEXTAREA_PARENT);
	this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);

};

function listarSedes(selectorName) {
	ajaxWebService.get(URI_SEDES).then((result) => {
		let sedes = result.data;
		sedes = _.orderBy(sedes, s => s.descripcion);
		listaSedes = _.map(sedes, s => s.descripcion);
		let html = `<option value="">[TODOS]</option>`;
		sedes.forEach(sede => html += `<option value="${sede.descripcion}">${sede.descripcion}</option>`);
		$(`${selectorName}`).html(html);
		$('.select-search').select2();
	});
}

function listarPolicias(selectorName) {
	ajaxWebService.get(URI_POLICIAS).then((result) => {
		let policias = result.data;
		policias = _.orderBy(policias, p => p.nombres);
		let html = `<option value="">[TODOS]</option>`;
		policias.forEach(p => html += `<option value="${p.dni}">${p.nombres}</option>`);
		$(`${selectorName}`).html(html);
		$('.select-search').select2();
	});
}

function defaultConfigHandsonTable() {
	let container = document.getElementById("tblProyectado");

	handsonTable = new Handsontable(container, {
		data: [],
		stretchH: 'all',
		rowHeaders: true,
		colHeaders: ['DNI', 'Apellidos y Nombres', 'Sede', 'Horario', 'Rol', 'Fecha Entrada', 'Hora entrada', 'Hora Salida', 'Fecha Salida'],
		columns: [{}, {}, {}, {}, {}, {}, {}, {}, {}]
	});
}



function ver() {
	debugger
	let policia_dni = $("#cboPoliciasFiltro").val();
	let sede_descripcion = $("#cboSedesFiltro").val();
	let fechaInicio = $("#dpFechaInicio").val();
	let fechaFin = $("#dpFechaFin").val();
	let rangoFechas = generarFechas(fechaInicio, fechaFin);


	let params = cleanQueryParams({
		policia_dni,
		sede_descripcion,
		fecha_entrada: rangoFechas
	});


	ajaxWebService.get(URI_POLICIA_PROYECCION, {params}).then((response) => {
		if (response.status) {
			handsonTable.destroy();
			let container = document.getElementById("tblProyectado");

			handsonTable = new Handsontable(container, {
				data: response.data,
				stretchH: 'all',
				rowHeaders: true,
				colHeaders: ['DNI', 'Apellidos y Nombres', 'Sede', 'Horario', 'Rol', 'Fecha Entrada', 'Hora entrada', 'Hora Salida', 'Fecha Salida'],
				columns: [
					{
						data: "policia_dni",
						className: 'text-center',
						readOnly: true
					},
					{
						"data": "policia_nombres",
						readOnly: true
					},
					{
						"data": "sede_descripcion",
						"className": "text-center",
//                editor: 'select',
//                selectOptions: sedes,
						source: listaSedes,
						strict: true,
						type: 'autocomplete',
						allowInvalid: false
					},
					{
						"data": "horario",
						"className": "text-center",
						readOnly: true
					},
					{
						"data": "tiporol_descripcion",
						"className": "text-center",
						readOnly: true
					},
					{
						"data": "fecha_entrada",
						"className": 'text-center',
						type: 'date',
						dateFormat: 'DD/MM/YYYY',
						readOnly: true

					},
					{
						data: "asistencia_entrada",
						className: 'text-center',
						editor: TA_EDITOR_HORA,
						type: 'time',
						timeFormat: 'HH:mm',
						correctFormat: true,
						allowInvalid: false
					},
					{
						data: "asistencia_salida",
						className: 'text-center',
						timeFormat: 'HH:mm',
						editor: TA_EDITOR_HORA,
						type: 'time',
						correctFormat: true,
						allowInvalid: false,
					},
					{
						data: "fecha_salida",
						className: 'text-center',
						type: 'date',
						dateFormat: 'DD/MM/YYYY',
						readOnly: true
					}
				],
//                afterChange: (change, source) => {
//                    console.log(`change= ${change}, source=${source}`);
//                }
			});
			registrarEventoTab();
		}


	});



}

function registrarEventoTab() {
	Handsontable.Dom.addEvent(document.body, 'keydown', function (e) {
		if (e.keyCode === 9 && handsonTable) {


			e.stopPropagation();
			var selection = handsonTable.getSelected();

			var rowIndex = selection[0];
			var colIndex = selection[1];

//            console.log(`row=${rowIndex}, col=${colIndex}`)

			//rowIndex++;
			colIndex++;


			if (colIndex > 7) {
				rowIndex++;
				colIndex = 6;
			} else if (colIndex < 6) {
				colIndex = 6;
			}

			handsonTable.selectCell(rowIndex, colIndex);
		}
	});
}

function guardarCambios() {
	let data = handsonTable.getSourceData();

	let dataRequest = data.map(d => {
		return {
			id: d.id,
			sede_descripcion: d.sede_descripcion,
			asistencia_entrada: d.asistencia_entrada,
			asistencia_salida: d.asistencia_salida
		}
	});

	swal({
		title: 'Está seguro de guardar los cambios?',
		text: "",
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#3085d6',
		cancelButtonColor: '#d33',
		confirmButtonText: 'Sí, guardar!'
	}).then((result) => {
		if (result.value) {
			let promises = dataRequest.map(p => ajaxWebService.patch(`${URI_POLICIA_PROYECCION}/${p.id}`, p));
			Promise.all(promises)
			  .then(axios.spread(function (...responses) {
				  swal(
					{
						type: 'success',
						title: '¡Se guardaron los cambios correctamente!',
						showConfirmButton: false,
						timer: 1500
					}
				  );

			  }))
		}
	})

}



$().ready(function () {
	listarPolicias("#cboPoliciasFiltro");
	listarSedes("#cboSedesFiltro");
	initDatePicker("#dpFechaInicio", "#dpFechaFin");
	defaultConfigHandsonTable();
	$("#btnVer").click(ver);
	$("#btnGuardarCambios").click(guardarCambios);
});