let submitFormData = document.querySelector('#submit');
let radioBtns = document.getElementsByName('choice');
let myPlaces = document.querySelector('.my-places');
let placesPara = document.querySelector('.noplacesAdded');

// VARS 
let country, image, city, date, fav, radioChoice, reverseDate, wantToGo;

// function that loops Radio buttons and gets the checked one for vitisted of unvisited.
function getRadioValue() {
	let choice;
		 radioBtns.forEach((btn)=>{
			if(btn.checked){
				 choice = btn.value;
				//console.log(`your choice is ${choice}`);
				}
		});
	return choice;
}


// LocalStorage is not enabled in CodePen for security reasons ====
// Check Local Storage for Data on Page Reload or use empty array.
// let allEntries = JSON.parse(document.localStorage.getItem("allEntries")) || [];
let allEntries = [];

// LocalStorage is not enabled in CodePen for security reasons ====
// CHECK IF THERE IS ANYTHING IN LOCAL STORAGE!!! ====
// if(document.localStorage.getItem("allEntries") !== null){
	// console.log('entries in localstorage');
	
	/// Loop through the array of entries to display on the Screen...
	allEntries.map((entry, i) => {
		
		const {country, city, fav, imageUrl, visited, date} = entry;
		// - hide paragraph saying no places.
		placesPara.style.display = 'none';
		wantToGo = `${visited === 'Been' ? true : false}`;
		
		let content = `<section class="place">
								<img src="${imageUrl}" / alt="photo">
								<p><span class="country">Country: ${country}</span><br/>
								<span class="city">City: ${city}</span></br>
								<span class="fav">${fav ? 'Favourite: ❤️' : ''}</span></br>
								<span class="wanttogo">Visited/Unvisted: ${visited ? 'Been' : 'Wish'}</span></br>
								<span class="date"> ${visited ? '<span class="date">Date Visited:' + ' ' + date + '</span>' : ''}</span></br>
								</p></section>`
		// adding the new content each time added to the existing content.
			myPlaces.innerHTML += content;	
	})
 // }

// ADDING PLACE FUNCTION =============
function placeAdded() {
		// - hide paragraph saying no places.
		placesPara.style.display = 'none';
		// // create a new section -----
		
		let content = `<section class="place">
								<img src="${image}" / alt="photo">
								<p><span class="country">Country: ${country}</span><br/>
								<span class="city">City: ${city}</span></br>
								<span class="fav">${fav ? 'Favourite: ❤️' : ''}</span></br>
								<span class="wanttogo">Visited/Unvisted: ${wantToGo ? 'Been' : 'Wish'}</span></br>
								${wantToGo ? '<span class="date">Date Visited:' + ' ' + reverseDate + '</span>' : ''}
								</p></section>`
		// adding the new content each time added to the existing content.
			myPlaces.innerHTML += content;	
}


// LocalStorage is not enabled in CodePen for security reasons ====
// SORT OUT ADDDING AND ARRAY THAT STAYS UPDATED AND DOESN'T Empty on refresh...
// Add data to localStorage ----
// function addLocalStorage(arr) {
// 	document.localStorage.setItem("allEntries", JSON.stringify(arr));
// }

//Check Errors of Form ===
 function errorCheck(){
	 if(document.querySelector('#country').value == "" || document.querySelector('#city').value == "" || document.querySelector('#image').value === "") {
		 console.log('these fields are required!')
	 }
 }

// Getting Values from Add Place Form =============
submitFormData.addEventListener('click', (e) => {
		
	errorCheck()
	e.preventDefault();
	country = document.querySelector('#country').value;
		city = document.querySelector('#city').value;
		date = document.querySelector('#date').value;
		image = document.querySelector('#image').value;
		
		//Split the Date by the -, so you get an array of year, month, day
		let splitDate = date.split("-"); 
		// then reverse the array, so you will get a date
   	reverseDate = splitDate.reverse(); 
		
		// call function to check if been or wish for visited.
		radioChoice = getRadioValue();
		wantToGo = radioChoice === 'true' ? true : false;
		fav = document.querySelector('#fav').checked;
		
		let entry = {
			country: country,
			city: city,
			visited: wantToGo,
			fav: fav,
			date: reverseDate,
			imageUrl: image
		}
		// allEntries.push(entry);
		// function that added data to DOM
		placeAdded();
		
		// LocalStorage is not enabled in CodePen for security reasons ====
		// Add to local storage function
		// addLocalStorage(allEntries);
})