let preferences_div = document.getElementById('preferences');
let ask_has_preferences_div = document.getElementById('ask-has-preferences');
let distance_location_div = document.getElementById('distance-location');
let preferences_or_random_div = document.getElementById('preferences-or-random');

document.querySelector('#use-geolocation').addEventListener('click', get_location_data);
document.querySelector('#has-preferences').addEventListener('click', show_preferences);


//Addition 04/01/2022
var real_slider_val = 10;
var slider = document.getElementById("radius-form");
var slider_text = document.getElementById("slider-range");
slider_text.textContent = real_slider_val + " miles";	//Pre fill the slider range.

var num_left_to_suggest = 5;	//May Be less.
var restaurants_suggested = [];

let r_name;
let description;


var restaurants_selected = new Map();
var available_restaurant_ids = [];
var selected_restaurant = 0;

var keyword_selected_arr = [];
var keyword_suggested_arr = [];

var genre_selected_arr = [];
var genre_suggested_arr = [];

var genre_arr = ["mexican", "chinese", "italian", "american", "indian", "german", "french"];
var keyword_arr = ["brie", "american", "southern-american", "irish", "german", "chinese", "to-go", "take-out", "drive-thru", "sushi", "savory", "sweet", "chocolate"];



function get_location_data() {
	console.log("get_location_data: getting coordinates.");
	var coords = document.getElementById('location-form');

	async function success(position) {
		console.log("get_location_data: obtained location!");
		latitude = position.coords.latitude;
		longitude = position.coords.longitude;

		coords.value = `${await getCity()} `;
	}

	function error() {
		alert("Unable to retrieve your location. Please enter manually.");
		console.log("get_location_data.error: Unable to retrieve your location");

		//Switch focus to location form if there is an error so they can manually input the data.
		document.getElementById("location-form").focus();
	}

	if (!window.navigator.geolocation) {
		alert('Geolocation is not supported by your browser, please use your city name');
	} else {
		console.log("get_location_data: Locating...");
		window.navigator.geolocation.getCurrentPosition(success, error);
	}
}//end get_location_data()

/**
 * This is a Promise function that returns the city, determined by 
 * the previously run Geolocation API. It is dependent upon having
 * coordinates.
 * @returns city
 */
async function getCity() {
	//Abort if the latitude or longitude are not filled out.
	if (latitude == null || longitude == null) {
		console.error("getCity: Latitude or Longitude is NULL.");
		return null;
	}

	return new Promise((resolve) => {
		var geo_token = "pk.ccd0d5b035531d08c7458087ad163cb1";
		current_city = null;
		console.log("getCity: Latitude: " + latitude + ", Longitude: " + longitude);

		var xhr = new XMLHttpRequest();

		// Paste your LocationIQ token below.
		xhr.open('GET', "https://us1.locationiq.com/v1/reverse.php?key=" + geo_token + "&lat=" + latitude +
			"&lon=" + longitude + "&zoom=17&format=json", 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);
				current_city = (response.address.city + ", " + response.address.state);
				console.log("getCity: " + current_city);

				resolve(current_city); //RESOLVE THE PROMISE
			}
		}
	});
} //END getCity

async function get_coords_from_city() {
	//Abort if the place is not filled out.
	place = document.getElementById("location-form").value;

	if (place == null || place.length < 2) {
		console.error("get_coords_from_city: place is NULL.");
		return null;
	}

	return new Promise((resolve) => {
		var geo_token = "pk.ccd0d5b035531d08c7458087ad163cb1";
		let coordinates = {
			latitude: null,
			longitude: null
		};
		console.log("get_coords_from_city: Location Name: " + place);

		var xhr = new XMLHttpRequest();

		// Paste your LocationIQ token below.
		xhr.open('GET', "https://us1.locationiq.com/v1/search.php?key=" + geo_token + "&q=" + place + "&format=json", 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);

				//Check if the place returned is administrative.
				try {
					for (i = 0; i < response.length; i++) {
						try {
							//In order of importance
							if (response[i].type == "administrative" || response[i].type == "town" || response[i].type == "hamlet" || response[i].type == "postcode") {
								console.log("get_coords_from_city: this IS " + response[i].type);
								coordinates.latitude = response[i].lat;
								coordinates.longitude = response[i].lon;
								resolve(coordinates);
								return;
							} else {
								console.log("get_coords_from_city: this is not administrative, a town, a hamlet, nor a postcode");
								clear_data();
								document.getElementById("location-form").focus();
							}
						} catch (e2) {
							console.log("get_coords_from_city: Chances are this place doesn't exist.");
							clear_data();
							document.getElementById("location-form").focus();
						}
					}
				} catch (exception) {
					console.log("get_coords_from_city: Something went wrong.");
					clear_data();
					document.getElementById("location-form").focus();
				}

				// resolve(coordinates); //RESOLVE THE PROMISE
			} else if (xhr.readyState == 4 && xhr.status == 404) {
				var response = JSON.parse(xhr.responseText);

				if (response.error == "Unable to geocode") {
					console.log("get_coords_from_city: " + response.error);

					async function doSleep(){
						document.getElementById("error-modal-location").textContent = place;
						document.getElementById("error-modal-place").style.display = "block";
						console.log("Sleeping");
						await sleep(3000)
						console.log("Awake");
						document.getElementById("error-modal-place").style.display = "none";
						clear_data();
					}
					doSleep();


					document.getElementById("location-form").focus();
					document.getElementById("location-form").select();
					resolve(null);
				}
			}
		}
	});
} //END getCity

function show_preferences() {
	console.log("show_preferences: running");
	// var preferences_div = document.getElementById("preferences");
	
	place = document.getElementById("location-form").value;
	// let radius = document.getElementById("radius-form").value;
	let radius = real_slider_val;
	let radius_display = document.getElementById("radius-display");
	let location_display = document.getElementById("location-display");

	if (place.length < 3 || place.length == null) {
		//If the data has not been filled out, we need to make sure that the information is added before we ask for any further preferences.
		console.log("location of : " + place + " is not sufficient.");
		//Show the modal
		async function doSleep(){
			document.getElementById("error-no-location-modal").style.display = "block";
			console.log("Sleeping");
			await sleep(1500)
			console.log("Awake");
			document.getElementById("error-no-location-modal").style.display = "none";

			clear_data();	//Clear the data about the location and distance.
			
			document.getElementById("location-form").focus();
			document.getElementById("location-form").select();
		}
		doSleep();



		return null;
	}else{
		async function fun1() {
			console.log("fill: obtained location!");
	
			coordinates = await get_coords_from_city();
	
			//If coordinates are null, circle back.
			if (coordinates === null || coordinates.latitude === null || coordinates.longitude === null) {
				console.log("fun1: Coordinates are null.");
				return null;
			} else if (coordinates.latitude != null && coordinates.longitude != null) {
				place = document.getElementById("location-form").value;
				latitude = coordinates.latitude;
				longitude = coordinates.longitude;
			} else {
				return null;
			}
		}
		fun1();
	}

	preferences_div.style.display = "block";
	// distance_location_div.style.display = "none";
	preferences_or_random_div.style.display = "none";

	//Scroll to the preferences area. Keep the location and distance thing shown.
	// window.scrollTo(0, keywords_text);
	console.log("Scroll to preferences");
	document.getElementById("preferences").scrollIntoView({behavior: "smooth", block: "center", inline: "start"});

	console.log("Location: " + place + ", Distance: " + radius);

	//The card showing location and radius
	location_display.textContent = place;
	radius_display.textContent = real_slider_val;

	//Listen for input on the location-form
	document.getElementById("location-form").oninput = function(){
		//Update the card
		location_display.textContent = place;
	};

	


	return null;
}//end show_preferences()

/**
 * 
 */
function hide_preferences() {
	console.log("hide_preferences: running");
	preferences_div.style.display = "none";

	return null;
}//End hide_preferences()



/**
 *  How far are you willing to go? Here we update the slider upon change.
 * @param {*} slideAmount 
 */
function updateSlider(slideAmount) {
	var slider = document.getElementById("slider-range");
	if (slideAmount != 1) {
		slider.innerHTML = slideAmount + " miles";
	} else {
		slider.innerHTML = slideAmount + " mile";
	}
}

//When the user accepts going to the restaurant do the following.
document.getElementById("suggestion-modal-going").addEventListener("click", function () {
	let index = null;
	try {
		//get the index of the restaurant;
		index = JSON.parse(previously_suggested[previously_suggested.length - 1]).index;
	} catch (exception) {
		console.error(exception);
	}

	// console.log("You accepted going to " + previously_suggested[previously_suggested.length - 1]);
	console.log("You accepted going to " + document.getElementById("suggestion-modal-name").textContent);

	//=====================================================================================================
	//							Add the restaurant to the list of restaurants.
	//=====================================================================================================

	//If the user is logged in.
	if(restaurnaut_key != null){
		var xhr = new XMLHttpRequest();
		let request_json = {
			
			restaurant_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].id,
			yelp_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].yelp_id,
			action : "ADD",
			auth : {
				key : sessionStorage.getItem("restaurnaut_key"),
				action : "confirmed"
			}
		};

		console.log("suggestion-modal-going: API key = "  + request_json.auth.key);


		// Paste your LocationIQ token below.
		xhr.open('POST', "https://restaurnaut.com/api/v1/restaurant/history.php", true);
		xhr.send(JSON.stringify(request_json));
		xhr.onreadystatechange = processRequest;
		// xhr.addEventListener("readystatechange", processRequest, false);

		function processRequest(e) {
			if (xhr.readyState == 4 && xhr.status == 201) {
				// var response = JSON.parse(xhr.responseText);
				console.log("CONFIRMED: successfully added restaurant to history.")
			}else{
				console.log(xhr.responseText);
			}
		}
	}else{
		//If there is no user logged in, 
		var xhr = new XMLHttpRequest();
		let request_json = {
			restaurant_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].id,
			yelp_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].yelp_id,
			action : "ADD",
			auth : {
				key : null,
				action : "confirmed"
			}
		};

		console.log("suggestion-modal-going: API key = "  + request_json.auth.key);


		// Paste your LocationIQ token below.
		xhr.open('POST', "https://restaurnaut.com/api/v1/restaurant/history.php", true);
		xhr.send(JSON.stringify(request_json));
		xhr.onreadystatechange = processRequest;
		// xhr.addEventListener("readystatechange", processRequest, false);

		function processRequest(e) {
			if (xhr.readyState == 4 && xhr.status == 201) {
				// var response = JSON.parse(xhr.responseText);
				console.log("CONFIRMED: successfully added restaurant to history.")
			}else{
				console.log(xhr.responseText);
			}
		}
	}
	//=====================================================================================================

	//Fill out the information.
	document.getElementById("suggestion-going-modal-name").textContent = document.getElementById("suggestion-modal-name").textContent;
	document.getElementById("suggestion-distance").textContent = restaurants[index].distance.toFixed(2);
	document.getElementById("suggestion-going-modal-address").textContent = restaurants[index].address.address_1 + ", " +
		((restaurants[index].address.address_2 != null) ? restaurants[index].address.address_2 + ", " : "") +
		restaurants[index].address.city + ", " +
		restaurants[index].address.state + " " +
		restaurants[index].address.zip;

	// let lat = 35.76368106160145;
	// let lon = -82.56397071689597;
	let address_to = restaurants[index].address.address_1 + ", " +
		((restaurants[index].address.address_2 != null) ? restaurants[index].address.address_2 : "") +
		restaurants[index].address.city + ", " +
		restaurants[index].address.state + " " +
		restaurants[index].address.zip;

	let address_to_plus = address_to.replace(" ", "+");
	let address_to_encoded = encodeURIComponent(address_to_plus);

	let maps_base_url = "https://www.google.com/maps/dir";
	// let maps_url = maps_base_url + "/" + latitude + ",+" + longitude + "/" + address_to_encoded + "/";
	let maps_url = maps_base_url + "//" + address_to_encoded + "/";

	document.getElementById("suggestion-going-modal-get-directions").setAttribute("href", maps_url);


	document.getElementById("suggestion-going-modal-get-directions").addEventListener('click', function () {

		// let lat = 38.24124;
		// let lon = -82.242842;
		// let address_to = restaurants[index].address.address_1 +  ", " + 
		// 																	((restaurants[index].address.address_2 != null)? restaurants[index].address.address_2 : "") + 
		// 																	restaurants[index].address.city + ", " + 
		// 																	restaurants[index].address.state + " " + 
		// 																	restaurants[index].address.zip;

		// let maps_base_url = "https://www.google.com/maps/dir";
		// let maps_url = maps_base_url + "/"+lat+",+"+lon+"/68+Wilde+Holw+Dr,+Weaverville,+NC+28787/"
		console.log("suggestion-going-modal-get-directions: clicked. Now to GOOGLE MAPS!");
	});
	// document.getElementById("suggestion-going-modal-name").textContent

	//Make changes to visibility.
	document.getElementById("suggestion-going-modal").style.display = "block";
	document.getElementById("suggestion-modal").style.display = "none";


	//record this response if logged in.
}, false);

document.getElementById("suggestion-modal-not-going").addEventListener('click', function(){
	var xhr = new XMLHttpRequest();
	//If the user is logged in.
	let request_json = null;

	if(restaurnaut_key != null){
		
		request_json = {
			restaurant_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].id,
			yelp_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].yelp_id,
			action: "ADD",
			auth : {
				key : sessionStorage.getItem("restaurnaut_key"),
				action : "declined"
			}
		};

		console.log(request_json.auth.key);
	}else{
		request_json = {
			restaurant_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].id,
			yelp_id : restaurants[JSON.parse(previously_suggested[previously_suggested.length - 1]).index].yelp_id,
			action: "ADD",
			auth : {
				key : null,
				action : "declined"
			}
		};
	}
	// Paste your LocationIQ token below.
	xhr.open('POST', "https://restaurnaut.com/api/v1/restaurant/history.php", true);
	xhr.send(JSON.stringify(request_json));
	xhr.onreadystatechange = processRequest;
	// xhr.addEventListener("readystatechange", processRequest, false);

	function processRequest(e) {
		if (xhr.readyState == 4 && xhr.status == 200) {
			// var response = JSON.parse(xhr.responseText);
			console.log("DECLINED: successfully added restaurant to history.")
		}
	}

	suggest_restaurant();
});

document.getElementById("no-preferences").onclick = function(){
	num_left_to_suggest = 5;
	suggest_restaurant();
};



async function suggest_restaurant() {
	console.log("suggest_restaurant");
	//First check if the location has been filled out.
	place = document.getElementById("location-form").value;
	let coordinates = {
		latitude: null,
		longitude: null
	};

	if (place === null || place.length < 2) {
		console.log("suggest_restaurant: location form too short.");

		async function doSleep(){
			document.getElementById("error-no-location-modal").style.display = "block";
			console.log("Sleeping");
			await sleep(3000)
			console.log("Awake");
			document.getElementById("error-no-location-modal").style.display = "none";

			clear_data();	//Clear the data about the location and distance.
			
			document.getElementById("location-form").focus();
			document.getElementById("location-form").select();
		}
		doSleep();
		return;
	}
	//If the location is missing or cannot be resolved to coordinates, point it out.
	async function fun1() {
		console.log("fill: obtained location!");

		coordinates = await get_coords_from_city();

		//If coordinates are null, circle back.
		if (coordinates === null || coordinates.latitude === null || coordinates.longitude === null) {
			console.log("fun1: Coordinates are null.");
			return null;
		} else if (coordinates.latitude != null && coordinates.longitude != null) {
			place = document.getElementById("location-form").value;
			latitude = coordinates.latitude;
			longitude = coordinates.longitude;
		} else {
			return null;
		}
	}

	//If the latitude and longitude are null, we will call FUN1 to fill out the coordinates from the given city name.
	if(latitude === null && longitude === null){
		if (await fun1() === null) {
			console.log("suggest_restaurant: exiting suggest_restaurant");
			return;
		}
	}

	if (restaurants === null) {
		selected_restaurant = null;
		console.log("suggest_restaurant: restaurants is null");

		async function query_restaurants() {
			restaurants = await query_random_restaurants();
			if(restaurants.amount == 0){


				//If there are no restaurants, ask Yelp for restaurants in the area,
				restaurants = await query_random_yelp_restaurants();

					if(restaurants.amount == 0){

					console.log("query_restaurants: there are no restaurants in the given range that apply.");
					// document.getElementById("no-suggestions-modal-radius").textContent = document.getElementById("radius-form").value;
					document.getElementById("no-suggestions-modal-radius").textContent = real_slider_val;
					document.getElementById("no-suggestions-modal-location").textContent = document.getElementById("location-form").value;
					// document.getElementById("no-suggestions-modal").style.display = "block";

					async function doSleep(){
						document.getElementById("no-suggestions-modal").style.display = "block";
						console.log("Sleeping");
						await sleep(3000)
						console.log("Awake");
						document.getElementById("no-suggestions-modal").style.display = "none";
						clear_data();
					}
					doSleep();

					document.getElementById("location-form").focus();
					document.getElementById("location-form").select();

					clear_data();
					
					return;
				}
			}
			console.log(restaurants);

			//populate the restaurants location in the array.
			for(let i = 0; i < restaurants.length; i++){
				available_restaurant_ids.push(i);
				
			}


			if(restaurants.length < 5){
				num_left_to_suggest = restaurants.length - 1;
				document.getElementById("remaining-suggestions").textContent = num_left_to_suggest;
			}

			// try{
				// rand = Math.floor(Math.random() * ((restaurants.length - 2) - 0) + 0);
				// let r_name = restaurants[rand].restaurant_name_display;
				// let description = restaurants[rand].description;

				// var rand = Math.floor(Math.random() * ((available_restaurant_ids.length - 2) - 0) + 0);
				rand = Math.floor(Math.random() * available_restaurant_ids.length);

				//Make sure the restaurant was not already chosen.
				console.log(restaurants_selected.size  + " : " +  restaurants.length);
				if(restaurants_selected.size < restaurants.length){
					if(restaurants_selected.has(available_restaurant_ids[rand])){

						
						let random_tries = 0;
						let is_random = true;
						let top = false;
						let bottom = false;

						while(true){
							if(restaurants_selected.has(available_restaurant_ids[rand])){
								// console.log("COLLISION: Attempting to suggest " + restaurants_selected.get(restaurants.restaurants[available_restaurant_ids[rand]].id).restaurant_name_display + " again.");

								if(random_tries >= 10){
									is_random = false;
									if(!top  && (rand + 1) < available_restaurant_ids.length){
										console.log(rand + " not top");
										rand++;
										
										top = false;
									}else if(top){
									
									}else{
										top = true;
										console.log(rand + " IS top");
									}
							
									if(top){
										if(!bottom && (rand - 1)  >= 0){
											console.log(rand + " not bottom");
											rand--;
									
										}else if(bottom){
											console.log("reached bottom");

										}else{
											bottom = true;
										}
									}
									// console.log("rand is now " + rand);
								}else{
									// rand = Math.floor(Math.random() * ((available_restaurant_ids.length - 2) - 0) + 0);
									rand = Math.floor(Math.random() * available_restaurant_ids.length);
									random_tries++;
									is_random = true;
								}

								// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
								console.log("COUNT >>> " + (is_random? " IS RANDOM " : " NOT RANDOM ") + available_restaurant_ids + " restaurants left");
							}else{
								r_name = restaurants[available_restaurant_ids[rand]].restaurant_name_display;
								description = restaurants[available_restaurant_ids[rand]].description;


								restaurants_selected.set(available_restaurant_ids[rand], restaurants[available_restaurant_ids[rand]]);

								selected_restaurant = available_restaurant_ids[rand];

								remove_term_from_array(available_restaurant_ids, available_restaurant_ids[rand]);
								// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
								console.log("COUNT >>> " + (is_random? " IS RANDOM " : " NOT RANDOM ") + available_restaurant_ids + " restaurants left");

								console.log("suggest_restaurants: You're going to: " + r_name);
								break;
							}
						}

					}else{
						console.log("COUNT >>> IS RANDOM " + (restaurants.length - restaurants_selected.size - 1) + " restaurants left");
						r_name = restaurants[available_restaurant_ids[rand]].restaurant_name_display;
						description = restaurants[available_restaurant_ids[rand]].description;
						console.log("suggest_restaurants: You're going to: " + r_name + " id " +  restaurants[available_restaurant_ids[rand]].id);

						restaurants_selected.set(available_restaurant_ids[rand], restaurants[available_restaurant_ids[rand]]);

						selected_restaurant = available_restaurant_ids[rand];
						remove_term_from_array(available_restaurant_ids, available_restaurant_ids[rand]);
						// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
						// console.log("COUNT >>> IS RANDOM " + (restaurants.restaurants.length - restaurants_selected.size) + " restaurants left");

					}
					console.log(available_restaurant_ids);
				}else{
					console.log("suggested all restaurants.");
				}

				// console.log("suggest_restaurants: You're going to: " + r_name);

				document.getElementById("remaining-suggestions").textContent = num_left_to_suggest;

				//Update the word suggestion/suggestions based on the number left.
				if(num_left_to_suggest == 1){
					document.getElementById("suggestion_plurality").textContent = "";
				}else{
					document.getElementById("suggestion_plurality").textContent = "s";
				}

				var w = 0;
				while(restaurants[selected_restaurant].address.address_1[w++] != " ");
				

				document.getElementById("suggestion-modal-street").textContent = restaurants[selected_restaurant].address.address_1.substring(w) + ", " + restaurants[selected_restaurant].address.city;


				//FILL OUT THE FOLLOWING dine-in-suggestion-modal table-service-suggestion-modal reservation-required-suggestion-modal suggestion-modal-genres
				try{
					if(restaurants[selected_restaurant].service.table_service == "yes"){
						document.getElementById("table-service-suggestion-modal").textContent = "Table Service";
						document.getElementById("table-service-suggestion-modal").style.display = "block";
					}else if(restaurants[selected_restaurant].service.table_service == "no"){
						document.getElementById("table-service-suggestion-modal").textContent = "No Table Service";
						document.getElementById("table-service-suggestion-modal").style.display = "block";
					}else{
						document.getElementById("table-service-suggestion-modal").style.display = "none";
					}

					if(restaurants[selected_restaurant].service.style == "fast-food"){
						document.getElementById("dine-in-suggestion-modal").textContent = "Fast Food";
						document.getElementById("dine-in-suggestion-modal").style.display = "block";
					}else if(restaurants[selected_restaurant].service.style == "sit-down"){
						document.getElementById("dine-in-suggestion-modal").textContent = "Dine In";
						document.getElementById("dine-in-suggestion-modal").style.display = "block";
					}else{
						document.getElementById("dine-in-suggestion-modal").style.display = "none";
					}

					if(restaurants[selected_restaurant].service.genre != "" && restaurants[selected_restaurant].service.genre != null){
						document.getElementById("suggestion-modal-genres").textContent = capitalize(restaurants[selected_restaurant].service.genre);
						document.getElementById("suggestion-modal-genres").style.display = "block";
					}else{
						document.getElementById("suggestion-modal-genres").style.display = "none";
					}

				}catch(missing_restaurant_data){
					console.error(missing_restaurant_data);
				}

				document.getElementById("suggestion-modal-name").textContent = r_name;
				document.getElementById("suggestion-modal-description").textContent = description;
				// document.getElementById("suggestion-latitude").textContent = restaurants[rand].coordinates.latitude;
				// document.getElementById("suggestion-longitude").textContent = restaurants[rand].coordinates.longitude;

				// document.getElementById("suggestion-box").style.display = "block";

				document.getElementById("suggestion-modal").style.display = "block";

				let obj = {};
				obj["name_display"] = restaurants[selected_restaurant].restaurant_name_display;
				obj["index"] = selected_restaurant;

				previously_suggested.push(JSON.stringify(obj));

				if((description != null && description != undefined)&& description != ""){
					console.log(restaurants[selected_restaurant].restaurant_name_display +"'s description: "+ description);
					document.getElementById("suggestion-modal-description-header").style.display = "block";
				}else{
					document.getElementById("suggestion-modal-description-header").style.display = "none";
					
				}
				

				let index = null;
				try {
					//get the index of the restaurant;
					index = JSON.parse(previously_suggested[previously_suggested.length - 1]).index;
				} catch (exception) {
					console.error(exception);
				}
				document.getElementById("suggestion-modal-distance").textContent = restaurants[index].distance.toFixed(2);
				document.getElementById("where-suggestion-modal").textContent = place;

			// }catch(no_restaurants){
			// 	console.log("query_restaurants: there are no restaurants in the given range that apply. " + no_restaurants);
			// }

		}

		query_restaurants();
	} else {
		let index = null;

		if(num_left_to_suggest > 0){

			// rand = Math.floor(Math.random() * ((restaurants.length - 2) - 0) + 0);
			// let r_name = restaurants[rand].restaurant_name_display;
			// let description = restaurants[rand].description;
			// console.log("suggest_restaurants: You're going to: " + r_name);

// var rand = Math.floor(Math.random() * ((available_restaurant_ids.length - 2) - 0) + 0);
				rand = Math.floor(Math.random() * available_restaurant_ids.length);

				//Make sure the restaurant was not already chosen.
				if(restaurants_selected.size < restaurants.length){
					if(restaurants_selected.has(available_restaurant_ids[rand])){

						
						let random_tries = 0;
						let is_random = true;
						let top = false;
						let bottom = false;

						while(true){
							if(restaurants_selected.has(available_restaurant_ids[rand])){
								// console.log("COLLISION: Attempting to suggest " + restaurants_selected.get(restaurants.restaurants[available_restaurant_ids[rand]].id).restaurant_name_display + " again.");

								if(random_tries >= 10){
									is_random = false;
									if(!top  && (rand + 1) < available_restaurant_ids.length){
										console.log(rand + " not top");
										rand++;
										
										top = false;
									}else if(top){
									
									}else{
										top = true;
										console.log(rand + " IS top");
									}
							
									if(top){
										if(!bottom && (rand - 1)  >= 0){
											console.log(rand + " not bottom");
											rand--;
									
										}else if(bottom){
											console.log("reached bottom");

										}else{
											bottom = true;
										}
									}
									// console.log("rand is now " + rand);
								}else{
									// rand = Math.floor(Math.random() * ((available_restaurant_ids.length - 2) - 0) + 0);
									rand = Math.floor(Math.random() * available_restaurant_ids.length);
									random_tries++;
									is_random = true;
								}

								// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
								// console.log("COUNT >>> " + (is_random? " IS RANDOM " : " NOT RANDOM ") + available_restaurant_ids + " restaurants left");
							}else{
								r_name = restaurants[available_restaurant_ids[rand]].restaurant_name_display;
								description = restaurants[available_restaurant_ids[rand]].description;


								restaurants_selected.set(available_restaurant_ids[rand], restaurants[available_restaurant_ids[rand]]);

								selected_restaurant = available_restaurant_ids[rand];

								remove_term_from_array(available_restaurant_ids, available_restaurant_ids[rand]);
								// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
								// console.log("COUNT >>> " + (is_random? " IS RANDOM " : " NOT RANDOM ") + available_restaurant_ids + " restaurants left");

								console.log("suggest_restaurants: You're going to: " + r_name);
								break;
							}
						}

					}else{
						console.log("COUNT >>> IS RANDOM " + (restaurants.length - restaurants_selected.size - 1) + " restaurants left");
						r_name = restaurants[available_restaurant_ids[rand]].restaurant_name_display;
						description = restaurants[available_restaurant_ids[rand]].description;
						console.log("suggest_restaurants: You're going to: " + r_name + " id " +  restaurants[available_restaurant_ids[rand]].id);

						restaurants_selected.set(available_restaurant_ids[rand], restaurants[available_restaurant_ids[rand]]);

						selected_restaurant = available_restaurant_ids[rand];
						remove_term_from_array(available_restaurant_ids, available_restaurant_ids[rand]);
						// console.log("There are " + restaurants_selected.size + " restaurants that have been suggested out of " + restaurants.restaurants.length + ".");
						// console.log("COUNT >>> IS RANDOM " + (restaurants.restaurants.length - restaurants_selected.size) + " restaurants left");

					}
					console.log(available_restaurant_ids);
				}else{
					console.log("suggested all restaurants.");
				}







			console.log("suggest_restaurants: You have " + --num_left_to_suggest + " suggestions allowed.");
			// remaining-suggestions

			//Update the number of remaining suggestions.
			document.getElementById("remaining-suggestions").textContent = num_left_to_suggest;

			//Update the word suggestion/suggestions based on the number left.
			if(num_left_to_suggest == 1){
				document.getElementById("suggestion_plurality").textContent = "";
			}else{
				document.getElementById("suggestion_plurality").textContent = "s";
			}

			var w = 0;
			while(restaurants[selected_restaurant].address.address_1[w++] != " ");

			document.getElementById("suggestion-modal-street").textContent = restaurants[selected_restaurant].address.address_1.substring(w);


			//FILL OUT THE FOLLOWING dine-in-suggestion-modal table-service-suggestion-modal reservation-required-suggestion-modal suggestion-modal-genres
			try{
				if(restaurants[selected_restaurant].service.table_service == "yes"){
					document.getElementById("table-service-suggestion-modal").textContent = "Table Service";
					document.getElementById("table-service-suggestion-modal").style.display = "block";
				}else if(restaurants[selected_restaurant].service.table_service == "no"){
					document.getElementById("table-service-suggestion-modal").textContent = "No Table Service";
					document.getElementById("table-service-suggestion-modal").style.display = "block";
				}else{
					document.getElementById("table-service-suggestion-modal").style.display = "none";
				}

				if(restaurants[selected_restaurant].service.style == "fast-food"){
					document.getElementById("dine-in-suggestion-modal").textContent = "Fast Food";
					document.getElementById("dine-in-suggestion-modal").style.display = "block";
				}else if(restaurants[selected_restaurant].service.style == "sit-down"){
					document.getElementById("dine-in-suggestion-modal").textContent = "Dine In";
					document.getElementById("dine-in-suggestion-modal").style.display = "block";
				}else{
					document.getElementById("dine-in-suggestion-modal").style.display = "none";
				}

				if(restaurants[selected_restaurant].service.genre != "" && restaurants[selected_restaurant].service.genre != null){
					document.getElementById("suggestion-modal-genres").textContent = capitalize(restaurants[selected_restaurant].service.genre);
					document.getElementById("suggestion-modal-genres").style.display = "block";
				}else{
					document.getElementById("suggestion-modal-genres").style.display = "none";
				}

			}catch(missing_restaurant_data){
				console.error(missing_restaurant_data);
			}

			document.getElementById("suggestion-modal-name").textContent = r_name;
			document.getElementById("suggestion-modal-description").textContent = description;
			// document.getElementById("suggestion-latitude").textContent = restaurants[selected_restaurant].coordinates.latitude;
			// document.getElementById("suggestion-longitude").textContent = restaurants[selected_restaurant].coordinates.longitude;

			// document.getElementById("suggestion-box").style.display = "block";

			document.getElementById("suggestion-modal").style.display = "block";

			let obj = {};
			obj["name_display"] = restaurants[selected_restaurant].restaurant_name_display;
			obj["index"] = selected_restaurant;

			previously_suggested.push(JSON.stringify(obj));


			if((description != null && description != undefined)&& description != ""){
				console.log(restaurants[selected_restaurant].restaurant_name_display +"'s description: "+ description);
				document.getElementById("suggestion-modal-description-header").style.display = "block";
			}else{
				document.getElementById("suggestion-modal-description-header").style.display = "none";
				
			}

			try {
				//get the index of the restaurant;
				index = JSON.parse(previously_suggested[previously_suggested.length - 1]).index;
			} catch (exception) {
				console.error(exception);
			}
			document.getElementById("suggestion-modal-distance").textContent = restaurants[index].distance.toFixed(2);

		}else{
			document.getElementById("out_of_choices").style.display = "block";
			restaurants = null;
			previously_suggested = [];
			
		}
	}

	// console.log(JSON.stringify(previously_suggested[previously_suggested.length - 1]));
}

function build_request_data() {

	let data = null;
	let json_data = null;

	json_data = JSON.stringify(data);

	return json_data;
}

function displayRadioValue(radioName) {
	var radio_value = null;

	for(let i = 0; i < radioName.length; i++) {
		if(radioName[i].checked){
			radio_value = radioName[i].value;
			return radio_value;
		}
	}
}

	/*
	name
		favorites-and-likes-input-radio
			ids
			favorites-and-likes-only-radio 	value= likes-and-favorites-only
			favorites-only-radio			value= favorites-only
	name
		service-fast-food
			ids
				fast-food-clear-btn		value= favorites-only
	name	
		service-style
			ids
				service-style-ts		value= table-service
				service-style-nts		value= no-table-service
	name 
		eat-style
			ids
				eat-style-di			value=	dine-in
				eat-style-to			value=  take-out
*/
async function query_random_restaurants() {
	console.log("query_random_restaurants: called.");

	var eat_style = {
						key : "eat_style",
						value : displayRadioValue(document.getElementsByName("eat-style"))
					};
	var service_style = {
							key : "service_style",
							value : displayRadioValue(document.getElementsByName("service-style"))
						};
	var service_fast_food = {
								key : "service_fast_food",
								value : displayRadioValue(document.getElementsByName("service-fast-food"))
							};
	var favorites_and_likes = {
								key : "favorites_and_likes",
								value : displayRadioValue(document.getElementsByName("favorites-and-likes-input-radio"))
							};

	var genres = {
					key : "genres",
					value : ""
				};

	if(genre_selected_arr.length > 0){
		for(let i = 0; i < genre_selected_arr.length; i++){
			
			if(!(i + 1 >= genre_selected_arr.length)){
				genres.value += genre_selected_arr[i] + ",";
			}else{
				genres.value += genre_selected_arr[i];
			}		
		}
	}

	var json_params = [eat_style, service_style, service_fast_food, favorites_and_likes, genres];
	var get_params = "";

	//run through and make check if the values are actually filled out..
	for(let i = 0; i < json_params.length; i++){
		if(json_params[i].value != undefined && json_params[i].value != null && json_params[i].value != ""){
			get_params += ("&" + json_params[i].key + "=" + json_params[i].value);

			console.log("query_random_restaurants: " + ("&" + json_params[i].key + "=" + json_params[i].value));
		}else{
			console.log("query_random_restaurants: Did not add to url");
		}
	}

	
	var request_url = "https://restaurnaut.com/api/v1/restaurant?lat=" + latitude + "&lon=" + longitude + "&radius=" + real_slider_val + get_params;
	
	
	
	return new Promise((resolve) => {
		// var request_url = "https://restaurnaut.com/api/v1/restaurant?lat=" + latitude + "&lon=" + longitude + "&radius=" + real_slider_val;
		var method = 'GET';

		//Hide the preferences
		hide_preferences();

		//Check to see if there is a location.

		// const sr_name = document.querySelector('#suggestion-modal-name');
		var r_name;

		// sr_name.textContent = '';

		//Abort if the latitude or longitude are not filled out.
		if (latitude == null || longitude == null) {
			console.error("query_random_restaurant: Latitude or Longitude is NULL.");
			return null;
		}
		var xhr = new XMLHttpRequest();

		xhr.open(method, request_url, true);

		xhr.setRequestHeader("Content-Type", "application/json");
		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);

				resolve(response.restaurants);
			} else if (xhr.readyState == 0) {
				console.log("query_random_restaurants: request not initialized.");
			} else if (xhr.readyState == 1) {
				console.log("query_random_restaurants: server connection established at " + request_url);
			} else if (xhr.readyState == 2) {
				console.log("query_random_restaurants: " + method + " request received for " + request_url);
			} else if (xhr.readyState == 3) {
				console.log("query_random_restaurants:  processing request.");
			}else if (xhr.readyState == 4 && xhr.status == 404){
				var response = JSON.parse(xhr.responseText);
				console.log("query_random_restaurants: No restaurants found.");
				resolve(response);
			}else if (xhr.status == 500){
				console.log("query_random_restaurants: A SERVERSIDE ERROR WAS ENCOUNTERED.");
				resolve(null);
			}
		}
	});
}

function clear_data(){
	console.log("clear_data: running");
	restaurants = null;
	latitude = null;
	longitude = null;
}

//suggestion-modal-menu

// document.getElementById("suggestion-modal-menu").addEventListener("click", function () {
// 	console.log("suggestion-modal-menu: Load Menu");

// });


//The progress bar
// for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
// 	e.style.setProperty('--value', e.value);
// 	e.style.setProperty('--min', e.min == '' ? '0' : e.min);
// 	e.style.setProperty('--max', e.max == '' ? '100' : e.max);
// 	e.addEventListener('input', () => e.style.setProperty('--value', e.value));
//   }


// //
// document.getElementById("change-ld-button").addEventListener("click", function(){
// 	console.log("change-ld-button:");
// });


/*
	We have a range, 0 to 50 miles, Let us increment by 1 mile up until 15 miles, then after
	15, increment by five.
	04/01/2022
*/
slider.oninput = function(){
	slider_text.textContent = this.value + " miles";

	if(this.value > 15){
		real_slider_val = parseInt(this.value) - 12;
		real_slider_val *= 5;
		slider_text.textContent = (real_slider_val) + " miles";
		// console.log(real_slider_val);
	}else{
		real_slider_val = this.value;
		// console.log(real_slider_val + " is under 15");
	}

	document.getElementById("radius-display").textContent = real_slider_val;

}//end slider.oninput()

	
	function select_keyword(keyword){
		remove_term_from_array(keyword_suggested_arr, keyword);
		add_term_to_array(keyword_selected_arr, keyword);

		console.log(keyword_suggested_arr);

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

		var selected_id = "selected-" + keyword;
		var parent = document.getElementById("selected_keywords");

		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 = keyword;

		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_keyword('" + keyword + "'); remove_element('suggested_keywords', 'selected_keywords');");

		// selected_x.setAttribute("onclick", "document.getElementById('"+selected_id+"').remove(); deselect_keyword('" + keyword + "'); remove_element('suggested_keywords', 'selected_keywords');");
		selected_x.setAttribute("class", "w3-right w3-margin-left w3-hover-text-red");
		selected_x.innerHTML = '&times;';

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

	/**
	 * Deselects a keyword and adds it back to the suggested keywords div.
	 * @param {*} keyword 
	 */
	function deselect_keyword(keyword){
		var suggestion_id = "suggestion-" + keyword;
		var parent = document.getElementById("suggested_keywords");

		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 = keyword;

		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_keyword('" + keyword + "'); remove_element('suggested_keywords', 'selected_keywords');");

		// suggestion_x.setAttribute("onclick", "document.getElementById('"+suggestion_id+"').remove(); select_keyword('" + keyword + "'); remove_element('suggested_keywords', 'selected_keywords');");
		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 keyword from the array.
		// for(i = 0; i < keyword_selected_arr.length; i++){ 
		// 	if ( keyword_selected_arr[i] === keyword) { 
		// 		keyword_selected_arr.splice(i, 1); 
		// 	}
		// }
		remove_term_from_array(keyword_selected_arr, keyword);
		add_term_to_array(keyword_suggested_arr, keyword);

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

	function remove_term_from_array(arr, term){
		//Find and remove the keyword from the array.
		for(i = 0; i < arr.length; i++){ 
			if ( arr[i] === term) { 
				arr.splice(i, 1); 
			}
		}
	}//End remove_term_from_array()

	function add_term_to_array(arr, term){
		if(arr.length == 0){
			arr.push(term);
			console.log("add_term_to_array: UNIQUE >>> array was empty: " + term + " WAS ADDED TO THE LIST.");
		}else{
			for(i = 0; i < arr.length; i++){
				if(term == arr[i]){
					//return. We cannot allow duplicates
					console.log("add_term_to_array: DUPLICATE >>> " + term + ".");
					console.log(arr.toString());
					return;
				}
			}
			arr.push(term);
			console.log("add_term_to_array: UNIQUE >>> " + term + " WAS ADDED TO THE LIST.");
		}
	}//End add_term_to_array()
	
	function remove_element(element_id1, element_id2){
		var element1 = document.getElementById(element_id1);
		var element2 = document.getElementById(element_id2);

		if(element1.children.length < 2){
			element1.style.display = "none";
			// console.log(element_id1 + ": hiding element: " + element1.children.length);
		}else{
			element1.style.display = "block";
			// console.log(element_id1 + ": displaying element: " + element1.children.length);
		}

		if(element2.children.length < 2){
			element2.style.display = "none";
			// console.log(element_id2 + ": hiding the object " + element2.children.length);
		}else{
			element2.style.display = "block";
			// console.log(element_id2 + ": displaying the object " + element2.children.length);
		}
	}//End remove_element(element_id1:string , element_id2:string)

	// fill_suggestions();
	remove_element('suggested_keywords', 'selected_keywords');
	remove_element('suggested_genres', 'selected_genres');


document.getElementById("change-ld-button").onclick = function(){
	document.getElementById("distance-location").scrollIntoView({behavior: "smooth", block: "center", inline: "start"});
	preferences_div.style.opacity = "0.5";
	document.getElementById("location-form").focus();
}; //end ("change-ld-button").onclick

document.getElementById("location-form").onblur = function(){
	console.log("no longer focused");
	document.getElementById("location-display").textContent = this.value;
	preferences_div.style.opacity = "1.0";
}; //End ("location-form").onblur

document.getElementById("keywords_text").onfocus = function(){
	// var keywords_text = this.offsetTop;
	// window.scrollTo(0, keywords_text);
	this.scrollIntoView({behavior: "smooth", block: "start", inline: "start"});
}; //end ("keywords_text").onfocus


async function update_keywords_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?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));
				}
			}
		}
	});
}

async function query_random_yelp_restaurants() {
	console.log("query_random_restaurants: called.");
	return new Promise((resolve) => {
		var request_url = "https://restaurnaut.com/api/v1/restaurant/augment?lat=" + latitude + "&lon=" + longitude + "&radius=" + real_slider_val;
		var method = 'GET';

		//Hide the preferences
		// hide_preferences();

		//Check to see if there is a location.

		// const sr_name = document.querySelector('#suggestion-modal-name');
		var r_name;

		// sr_name.textContent = '';

		//Abort if the latitude or longitude are not filled out.
		if (latitude == null || longitude == null) {
			console.error("query_random_restaurant: Latitude or Longitude is NULL.");
			return null;
		}
		var xhr = new XMLHttpRequest();

		xhr.open(method, request_url, true);

		xhr.setRequestHeader("Content-Type", "application/json");
		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);

				resolve(response.restaurants);
			} else if (xhr.readyState == 0) {
				console.log("query_random_restaurants: request not initialized.");
			} else if (xhr.readyState == 1) {
				console.log("query_random_restaurants: server connection established at " + request_url);
			} else if (xhr.readyState == 2) {
				console.log("query_random_restaurants: " + method + " request received for " + request_url);
			} else if (xhr.readyState == 3) {
				console.log("query_random_restaurants:  processing request.");
			}else if (xhr.readyState == 4 && xhr.status == 404){
				var response = JSON.parse(xhr.responseText);
				console.log("query_random_restaurants: No restaurants found.");
				resolve(response);
			}else if (xhr.status == 500){
				console.log("query_random_restaurants: A SERVERSIDE ERROR WAS ENCOUNTERED.");
				resolve(null);
			}
		}
	});
}

document.getElementById("keywords_text").onfocus = function(){
	document.getElementById("suggested_genres").style.display = "none";
	// document.getElementById("selected_keywords").style.display = "none";
	//clear the suggested array.
	genre_suggested_arr = [];
}


// document.getElementById("keywords_text").onkeyup = function(event){
// 	if(event.code === 'Enter'){
// 		document.getElementById("keywords_text").blur();
// 		document.getElementById("suggested_keywords").focus();
// 	}
// }


document.getElementById("preferences_submit").onclick = function(){
	console.log("preferences_submit: submitting " + place + " with radius " + real_slider_val);
	num_left_to_suggest = 5;
	suggest_restaurant();
};

//Autocomplete for cities and keywords
autocomplete_city(document.getElementById("location-form"), cities);
autocomplete_keywords(document.getElementById("keywords_text"), keyword_arr);




/************************************************************************************************************************ 
************************************************************************************************************************
************************************************************************************************************************
************************************************************************************************************************
*************************************************************************************************************************/

function build_get_request_data(params_array){
	var url_params = "";
	for(let i = 0; i < params_array.length; i++){
		if(i==0){
			url_params += "?"+param
		}
	}
}

function capitalize(str){
	str = str.toLowerCase().split(' ');
	for (var i = 0; i < str.length; i++) {
	  str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); 
	}
	return str.join(' ');
}//end function capitalize(str)