var fileLast = 0;
function renderFile(cnt, type="", file_extracted="", file_plain=""){
	var template = $("#filesTemplate").html();
	template = template.replaceAll('{cnt}', cnt)
		.replaceAll('{file_extracted}', file_extracted)
		.replaceAll('{file_extracted}', file_extracted)
		.replaceAll('{file_plain}', file_plain);

	['text', 'image', 'audio'].forEach((t)=>{
		template = template.replaceAll('{'+t+'_selected}', t === type ? 'selected' : '' );
	});
	$("#filesRender").append(template);

	$("button#removeFile"+cnt).click( () => {
		$("#filesRow" + cnt).remove();
		update_json_message()
	});

	fileLast = cnt;
}
$("#addFile").click(() => renderFile(++fileLast));

function update_json_message(){
	let message = JSON.parse(basic_message);

	var store_values = {}
	$(".message-attribute").each((_,v)=>{
		let el = $(v);
		let name = el.attr('name');
		let val = el.attr("type") == "checkbox" ? el.prop('checked') : el.val();

		// optional fields (empty => null) 
		if( name.endsWith("file_extracted") && val.length == 0 ){
			val = null;
		}

		store_values[name] = val;
	
		let curr_msg = message;
		let last_ob = {};
		let last_name = "";
		name.split('.').forEach((e)=>{
			last_ob = curr_msg;
			last_name = e;

			if( !curr_msg.hasOwnProperty(e) ){
				curr_msg[e] = {}
			}

			curr_msg = curr_msg[e];
		});
		last_ob[last_name] = val;
	});
	localStorage.setItem("new_riddle", JSON.stringify(store_values))

	// fix array for data
	if(message.hasOwnProperty('data')){
		var data_items = message['data'];
		message['data'] = [];
		Object.keys(data_items).forEach((v)=>{
			if( v !== null){
				message['data'].push(data_items[v]);
			}
		});
	}

	$("#message_content").val(JSON.stringify(message, null, 2));
}
function load_last_values(){
	if(localStorage.getItem("new_riddle") !== null){
		var items = JSON.parse(localStorage.getItem("new_riddle"))
		console.log(items)
		Object.keys(items).forEach((k)=>{

			// if data, create the file select for this id
			if(k.startsWith('data.') && $("[name='"+k+"']").length == 0){
				renderFile(parseInt(k.substring(5, k.indexOf('.',5))))
			}

			let el = $("[name='"+k+"']");
			if(el.attr("type") == "checkbox"){
				el.prop('checked', items[k]);
			}
			else{
				el.val(items[k]);
			}
		});
	
		update_json_message()
	}
}
load_last_values();

$( document ).on( "change", ".message-attribute", update_json_message)
$( document ).on( "click", ".message-attribute[type=checkbox]", update_json_message)

function send_json_message(json_str){
	$.ajax(
		"/message",
		{
			contentType : 'application/json',
			type : 'POST',
			data: json_str,
		},
	).then((d) => {
		$("#message_sent .modal-title").text("Message Sent");
		$("#message_sent .modal-body").html('<pre>'+JSON.stringify(d, null, 2)+'</pre>');
		new bootstrap.Modal('#message_sent').show();
	}).fail((d)=>{
		$("#message_sent .modal-title").text("Error Sending Message");
		$("#message_sent .modal-body").html('<pre>'+JSON.stringify(d, null, 2)+'</pre>');
		new bootstrap.Modal('#message_sent').show();
	});
}
$("#send_message").click(
	() => send_json_message($("#message_content").val())
);