// var genre_selected_arr = [];
// var genre_suggested_arr = [];
// var genre_arr = ["mexican", "chinese", "italian", "american", "indian", "german", "french"];

function autocomplete_genres(inp, arr){
	/*the autocomplete function takes two arguments,
	the text field element and an array of possible autocompleted values:*/
	var currentFocus;
	var parent = document.getElementById("suggested_genres");
	/*execute a function when someone writes in the text field:*/
	inp.addEventListener("input", async function (e) {
		var a, b, i, val = this.value;
		/*close any already open lists of autocompleted values*/
		closeAllLists();
		if (!val) {
			return false;
		}
		// currentFocus = -1;
		a = document.createElement("div");
		a.setAttribute("id", this.id + "autocomplete-list");
		a.setAttribute("class", "autocomplete-genre-items");
		// parent.setAttribute("class", "autocomplete-genre-items");
		parent.appendChild(a);

		arr = await update_genres_arr(val);


	/*for each item in the array...*/
	for (i = 0; i < arr.length; i++) {
		var bflag = false;
		/*check if the item starts with the same letters as the text field value:*/
		if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
			for(j = 0; j < genre_selected_arr.length; j++){
				if(arr[i].toUpperCase() == genre_selected_arr[j].toUpperCase()){
					//continue. We cannot allow duplicates
					console.log("DUPLICATE >>> " +  arr[i].toUpperCase() + " is already in the array.");
					//set a flag, then break
					bflag = true;

					//break
					break;
				}else{
					console.log("UNIQUE >>> " + arr[i].toUpperCase() + " is not in the list.");
				}
			}
			for(j = 0; j < genre_suggested_arr.length; j++){
				if(arr[i].toUpperCase() == genre_suggested_arr[j].toUpperCase()){
					//continue. We cannot allow duplicates
					console.log("DUPLICATE >>> " +  arr[i].toUpperCase() + " is already in the array.");
					//set a flag, then break
					bflag = true;

					//break
					break;
				}else{
					console.log("UNIQUE >>> " + arr[i].toUpperCase() + " is not in the list.");
				}
			}


			if(bflag){
				console.log("Continue to next iteration.");
				continue;
			}

			var suggestion_id = "suggestion-genre-genre-" + arr[i];
			/*create a DIV element for each matching element:*/
			var suggestion_container = document.createElement("span");
			var suggestion_text = document.createElement("span");
			var suggestion_x = document.createElement("span");

			console.log(suggestion_id);
			document.getElementById("suggested_genres").scrollIntoView({behavior: "smooth", block: "center", inline: "start"});
			//set the id
			suggestion_container.setAttribute("id", suggestion_id);

			//fill its text content 
			// suggestion_text.textContent = arr[i];

			suggestion_container.appendChild(suggestion_text);
			suggestion_container.appendChild(suggestion_x);

			suggestion_container.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;");

			suggestion_container.setAttribute("class", "w3-tag w3-blue w3-round");
			// suggestion_text.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;");
			
			suggestion_container.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_genre('" + arr[i] + "'); remove_element('suggested_genres', 'selected_genres');");

			// suggestion_x.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_genre('" + genres[i] + "'); remove_element('suggested_genres', 'selected_genres');");
			suggestion_x.setAttribute("class", "w3-right w3-margin-left w3-hover-text-green");
			suggestion_x.innerHTML = '&plus;';

	


			/*make the matching letters bold:*/
			suggestion_text.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
			suggestion_text.innerHTML += arr[i].substr(val.length);
			/*insert a input field that will hold the current array item's value:*/
			// suggestion_text.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
			/*execute a function when someone clicks on the item value (DIV element):*/
			suggestion_container.addEventListener("click", function (e) {
				console.log("Selected suggestion: " + suggestion_text.textContent);
				/*insert the value for the autocomplete text field:*/
				// inp.value = this.getElementsByTagName("input")[0].value;
				// inp.value = this.getElementsByTagName("span")[0].value;
				inp.focus();
				
				/*close the list of autocompleted values,
				(or any other open lists of autocompleted values:*/
				// closeAllLists();
				remove_element('suggested_genres', 'selected_genres');
			});
			// parent.appendChild(suggestion_container);
			a.appendChild(suggestion_container);
			remove_element('suggested_genres', 'selected_genres');
		}
	}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function (e) {
	console.log("keydown: suggested_genres");
	var x = document.getElementById("suggested_genres");
	if (x) x = x.getElementsByTagName("span");
	if (e.keyCode == 40) {
		/*If the arrow DOWN key is pressed,
		increase the currentFocus variable:*/
		currentFocus++;
		/*and and make the current item more visible:*/
		addActive(x);
	} else if (e.keyCode == 38) { //up
		/*If the arrow UP key is pressed,
		decrease the currentFocus variable:*/
		currentFocus--;
		/*and and make the current item more visible:*/
		addActive(x);
	} else if (e.keyCode == 13) {
		/*If the ENTER key is pressed, prevent the form from being submitted,*/
		e.preventDefault();
		if (currentFocus > -1) {
			/*and simulate a click on the "active" item:*/
			if (x) x[currentFocus].click();
		}
	}
});

function addActive(x) {
	/*a function to classify an item as "active":*/
	if (!x) return false;
	/*start by removing the "active" class on all items:*/
	removeActive(x);
	if (currentFocus >= x.length) currentFocus = 0;
	if (currentFocus < 0) currentFocus = (x.length - 1);
	/*add class "autocomplete-active":*/
	x[currentFocus].classList.add("autocomplete-active");
}

function removeActive(x) {
	/*a function to remove the "active" class from all autocomplete items:*/
	for (var i = 0; i < x.length; i++) {
		x[i].classList.remove("autocomplete-active");
	}
}

function closeAllLists(elmnt) {
	/*close all autocomplete lists in the document,
	except the one passed as an argument:*/
	var x = document.getElementsByClassName("autocomplete-genre-items");
	for (var i = 0; i < x.length; i++) {
		if (elmnt != x[i] && elmnt != inp) {
			x[i].parentNode.removeChild(x[i]);
		}
	}
	remove_element('suggested_genres', 'selected_genres');
}
/*execute a function when someone clicks in the document:*/
// document.addEventListener("click", function (e) {
// 	closeAllLists(e.target);
// });
}

	
function select_genre(genre){
	// if(genre_selected_arr.length == 0){
	// 	genre_selected_arr.push(genre);
	// 	console.log("UNIQUE >>> array was empty: " + genre + " WAS ADDED TO THE LIST.");
	// }else{
	// 	for(i = 0; i < genre_selected_arr.length; i++){
	// 		if(genre == genre_selected_arr[i]){
	// 			//return. We cannot allow duplicates
	// 			console.log("DUPLICATE >>> " + genre + ".");
	// 			console.log(genre_selected_arr.toString());
	// 			return;
	// 		}
	// 	}
	// 	genre_selected_arr.push(genre);
	// 	console.log("UNIQUE >>> " + genre + " WAS ADDED TO THE LIST.");
	// }
	remove_term_from_array(genre_suggested_arr, genre);
	add_term_to_array(genre_selected_arr, genre);

	console.log(genre_selected_arr);

	document.getElementById("genres_text").value = "";

	var selected_id = "selected-genre-" + genre;
	var parent = document.getElementById("selected_genres");

	var selected_container = document.createElement("span");
	var selected_text = document.createElement("span");
	var selected_x = document.createElement("span");

	console.log(selected_id);
	//set the id
	selected_container.setAttribute("id", selected_id);

	//fill its text content 
	selected_text.textContent = genre;

	selected_container.appendChild(selected_text);
	selected_container.appendChild(selected_x);

	selected_container.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;");

	selected_container.setAttribute("class", "w3-tag w3-green w3-round");
	
	selected_container.setAttribute("onclick", "document.getElementById('"+selected_id+"').remove(); deselect_genre('" + genre + "'); remove_element('suggested_genres', 'selected_genres');");

	// selected_x.setAttribute("onclick", "document.getElementById('"+selected_id+"').remove(); deselect_genre('" + genre + "'); remove_element('suggested_genres', 'selected_genres');");
	selected_x.setAttribute("class", "w3-right w3-margin-left w3-hover-text-red");
	selected_x.innerHTML = '&times;';

	parent.appendChild(selected_container);
}//End select_genre

/**
 * Deselects a genre and adds it back to the suggested genres div.
 * @param {*} genre 
 */
function deselect_genre(genre){
	var suggestion_id = "suggestion-genre-" + genre;
	var parent = document.getElementById("suggested_genres");

	var suggestion_container = document.createElement("span");
	var suggestion_text = document.createElement("span");
	var suggestion_x = document.createElement("span");

	console.log(suggestion_id);
	//set the id
	suggestion_container.setAttribute("id", suggestion_id);

	//fill its text content 
	suggestion_text.textContent = genre;

	suggestion_container.appendChild(suggestion_text);
	suggestion_container.appendChild(suggestion_x);

	suggestion_container.setAttribute("style", "margin-bottom: 5px; margin-left: 2px; margin-right: 2px;");

	suggestion_container.setAttribute("class", "w3-tag w3-blue w3-round");
	
	suggestion_container.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_genre('" + genre + "'); remove_element('suggested_genres', 'selected_genres');");

	// suggestion_x.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_genre('" + genre + "'); remove_element('suggested_genres', 'selected_genres');");
	suggestion_x.setAttribute("class", "w3-right w3-margin-left w3-hover-text-green");
	suggestion_x.innerHTML = '&plus;';

	parent.appendChild(suggestion_container);

	//Find and remove the genre from the array.
	// for(i = 0; i < genre_selected_arr.length; i++){ 
	// 	if ( genre_selected_arr[i] === genre) { 
	// 		genre_selected_arr.splice(i, 1); 
	// 	}
	// }
	remove_term_from_array(genre_selected_arr, genre);
	add_term_to_array(genre_suggested_arr, genre);

	document.getElementById("genres_text").focus();
	document.getElementById("genres_text").scrollIntoView({behavior: "smooth", block: "center", inline: "start"});
}//End deselect_genre


async function update_genres_arr(search_string){

	return new  Promise((resolve) => {

		var xhr = new XMLHttpRequest();

		// Paste your LocationIQ token below.
		xhr.open('GET', "https://restaurnaut.com/api/v1/keywords?type=genre&search=" + search_string, true);
		xhr.send();
		xhr.onreadystatechange = processRequest;
		// xhr.addEventListener("readystatechange", processRequest, false);

		function processRequest(e) {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var response = JSON.parse(xhr.responseText);


				if(response.keywords != null){
					ret_arr = [];

					for(i=0;i<response.keywords.length;i++){
						ret_arr.push(response.keywords[i]);
						console.log("added: " + ret_arr[i])	
					}

					resolve(ret_arr);
				}else{
					resolve(new Array(null));
				}
			}
		}
	});
}

document.getElementById("genres_text").onfocus = function(){
	document.getElementById("suggested_keywords").style.display = "none";
	// document.getElementById("selected_keywords").style.display = "none";
	//clear the suggested array.
	keyword_suggested_arr = [];
}


autocomplete_genres(document.getElementById("genres_text"), genre_arr);