/*
 *	helper functions
 */

// roll for initiative with the given reaction and number of ini dice  
function rollForInitiative(dice, rea) {
	let ini = 0;
	for ( let i = 0; i < parseInt(dice); i++ ) {
		roll = Math.floor(Math.random() * 6) + 1;
//		console.log(roll);	
		ini += roll;
	}
	return ini + parseInt(rea);
}

// sorts the combatants by ini value
function sortTable() {
console.log("OK let's sort");
	let $table = $("table#combatants");
	let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) {
		return parseInt($(b).attr("data-ini")) - parseInt($(a).attr("data-ini"));
	});
	for ( var i = 0; i < $rows.length; i++ ) {
		$table.append($rows[i]);
	}
}


/*
 *	Event handler functions
 */

// blur handler for input elements (blur is triggered when an element loses focus) that checks if validation is required
function handleBlur (e) {
	let $tr = $(e.target).parents("tr");

	// trigger validation check only if focus is not going to another input in the same row 
	if ( ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
			
		// validation check 
		if ( ! validateCombRowValues($tr) )  { 
			e.preventDefault();
			return false;
		}

		// did Ini value stay the same? do nothing then  
		if ( $tr.find(".combIni")[0].value == $tr.attr("data-ini") ) {
			return true;
		}
					
		// Ini value changed => reposition row
		$tr.attr("data-ini", $tr.find(".combIni")[0].value);
		sortTable()
	}
}

// click handler for add buttons
function handleAddButtonClick (e) {

	// restyle modal
	$modal = $("#addCombModal");
	$modal.find(".modal-title").text("Add Combatant");
	$modal.find("#addModalOkButton").show();
	$modal.find("#editModalOkButton").hide();

	// add handler for enter key
	$("#addCombModal input[class*='comb']").off("keydown");
	$("#addCombModal input[class*='comb']").on("keydown", function (e) {
		if ( e.which == 13 || e.which == 10 ) {
			addCombatant();
			$('#addCombModal').modal("hide");
		}
	});

	// show modal
	$modal.modal("show");
}


// click handler for edit buttons
function handleEditButtonClick (e) {

	// find current table row
	let $tr = $(e.target).parents("tr.combRow");

	// restyle modal
	$modal = $("#addCombModal");
	$modal.find(".modal-title").text("Edit Combatant");
	$modal.find("#addModalOkButton").hide();
	$modal.find("#editModalOkButton").show();

	// populate modal with values from row
	$modal.find(".combName").val($tr.find(".combName").val());
	$modal.find(".combDice").val($tr.find(".combDice").val());
	$modal.find(".combRea").val($tr.find(".combRea").val());
	$modal.find(".combIni").val($tr.find(".combIni").val());

	// note which row is being edited
console.log($("tr.combRow").index($tr));
	$modal.attr("data-row", $("tr.combRow").index($tr));

	// add handler for enter key
	$("#addCombModal input[class*='comb']").off("keydown");
	$("#addCombModal input[class*='comb']").on("keydown", function (e) {
		if ( e.which == 13 || e.which == 10 ) {
			modifyCombatant();
			$('#addCombModal').modal("hide");
		}
	});
	
	// show modal
	$modal.modal("show");
}


// click handler for act buttons
function handleActButtonClick (e) {
	// find current table row
	let $tr = $(e.target).parents("tr.combRow");
	let input = $tr.find(".combIni")[0];

	// reduce ini by 10 but not lower than 0
	input.value = Math.max(parseInt(input.value) - 10, 0);
	$tr.attr("data-ini", input.value);

	// resort table
	sortTable();
}


// click handler for remove buttons
function handleRemoveButtonClick (e) {
	// remove table row
	$(e.target).parents("tr.combRow").remove();
}


/*
 *	Validation functions
 */

// validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombRowValues(tr) {

	let inputElements = {
		name: $(tr).find("input[class*='combName']").get(0),
		ini: $(tr).find("input[class*='combIni']").get(0),
		dice: $(tr).find("input[class*='combDice']").get(0),
		rea: $(tr).find("input[class*='combRea']").get(0)
	};

	// do standard HTML5 form validation first (makes sure that name is not empty and that all other values are numbers within their individual ranges) 
	let valid = true;
	Object.values(inputElements).forEach(function(input) {
		if ( ! input.reportValidity() ) {
			valid = false;
		}
	})
	if ( ! valid ) {
		return false;
	}

	// now some custom validation
	// first get values
	let ini = inputElements["ini"].value.trim();
	let dice = inputElements["dice"].value.trim();
	let rea = inputElements["rea"].value.trim();

	// invalidate if ini, dice and rea are all empty
	if ( ini == "" && ( dice == "" || rea == "" ) ) {
		inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
		inputElements["ini"].reportValidity();
		inputElements["ini"].setCustomValidity("");
		return false;
	}

	// invalidate if dice or rea is empty but not both
	if ( ( dice == "" ) != ( rea == "" ) ) {
		inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
		inputElements["dice"].reportValidity();
		inputElements["dice"].setCustomValidity("");
		return false;
	}

	// ok fine
	return true;
}


/*
 *	Main functions
 */

// add new combatant 
function addCombatant (e) {
	if ( ! validateCombRowValues($("#addCombForm")) ) {
		return;
	}

	// get values
	let name = $("#addCombModal .combName").val().trim();
	let ini = $("#addCombModal .combIni").val().trim();
	let dice =  $("#addCombModal .combDice").val().trim();
	let rea = $("#addCombModal .combRea").val().trim();

	// roll for initiative if ini is empty
	ini = (ini != "") ? ini : rollForInitiative(dice, rea);

	// construct jQuery object for table row
	let $tr = $($.parseHTML( [
		'<tr class="combRow" data-ini="', ini, '">\n',
			'<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n',
				'<td>\n',
					'<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', name, '" />\n',
				'</td>\n',
				'<td class="col-sm-2">\n',
					'<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n',
				'</td>\n',
				'<td class="col-sm-3">\n',
					'<div class="input-group">\n',
						'<input type="number" min="1" max="5" class="form-control combDice" title="click to edit" value="', dice, '" />\n',
						'<span class="input-group-text">D+</span>\n',
						'<input type="number" min="1" max="20" class="form-control combRea" title="click to edit" value="', rea, '" />\n',
					'</div>\n',
				'</td>\n',
				'<td>\n',
					'<div class="btn-group d-flex">\n',
						'<button type="button" class="btn btn-primary w-50 edit-button" title="Edit combatant\'s values">Edit</button>&nbsp;\n',
						'<button type="button" class="btn btn-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>&nbsp;\n',
						'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>\n',
					'</div>\n',
				'</td>\n',
			'</form>\n',
		'</tr>'].join("")
	));

	// add handlers to table row object
//	$tr.find("input[class*='comb']").on("blur", handleBlur);
//	$tr.find("input[type='number']").bind('keyup input change', handleBlur);
	$tr.find("button.edit-button").on("click", handleEditButtonClick);
	$tr.find("button.act-button").on("click", handleActButtonClick);
	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);

	// insert combatant row
	$("table#combatants").append($tr);
	sortTable();

	//reset form values
	$("#addCombModal input[class*='comb']").val("");
}

// modify combatant values
function modifyCombatant (e) {

	$("#addCombModal").modal("hide");

	// validate form
	if ( ! validateCombRowValues($("#addCombForm")) ) {
		return;
	}

	// get values
	let name = $("#addCombModal .combName").val().trim();
	let ini = $("#addCombModal .combIni").val().trim();
	let dice =  $("#addCombModal .combDice").val().trim();
	let rea = $("#addCombModal .combRea").val().trim();

	// roll for initiative if ini is empty
	ini = (ini != "") ? ini : rollForInitiative(dice, rea);

	// get correct row
	let index = parseInt($("#addCombModal").attr("data-row"));
	$tr = $("tr.combRow").eq(index);

	// set new values
	$tr.find(".combName").val(name);
	$tr.find(".combDice").val(dice);
	$tr.find(".combRea").val(rea);
	$tr.find(".combIni").val(ini);
	$tr.attr("data-ini", ini);

	// clean up
	$("#addCombModal").removeAttr("data-row");
	$("#addCombModal input[class*='comb']").val("");
}


// start a new combat round
function newRound() {

	// are there rows at all?
	let $rows = $("tr.combRow");
	if ( $rows.length == 0 ) {
		return;
	}

	// reset ini values in cloned rows
	$rows.each( function() {
		let $input = $(this).find(".combIni");
		let dice = $(this).find(".combDice").val();
		if ( dice == "" ) {
			$input.val(0);
		} else {
			$input.val(rollForInitiative(dice, $(this).find(".combRea").val()));
		}
		$(this).attr("data-ini", $input.val());
	});

	// resort table
	sortTable();
}


/*
 *	Initialize document
 */

$(document).ready(function(){
	// add event handlers to initial buttons and input elements
	$("#newCombAddButton").on("click", handleAddButtonClick);
	$("#newroundModalOkButton").on("click", newRound);
	$("#addModalOkButton").on("click", addCombatant);
	$("#editModalOkButton").on("click", modifyCombatant);

	$('#addCombModal').on('shown.bs.modal', function() {
		$('.combName').focus();
	})
});