"use strict"

window.addEventListener("DOMContentLoaded", function () {
   document.querySelector("#fetchQuotesBtn").addEventListener("click", function () {

      // Get values from drop-downs
      const topicDropdown = document.querySelector("#topicSelection");
      const selectedTopic = topicDropdown.options[topicDropdown.selectedIndex].value;
      const countDropdown = document.querySelector("#countSelection");
      const selectedCount = countDropdown.options[countDropdown.selectedIndex].value;
   
      // Get and display quotes
      fetchQuotes(selectedTopic, selectedCount);	   
   });
});

function fetchQuotes(topic, count) {
    // TODO: Modify to use XMLHttpRequest
    // TODO: set request type to expect json
    // the api https://wp.zybooks.com/quotes.php?topic=love&count=3
    let url= "https://wp.zybooks.com/quotes.php?";
    let xhr = new XMLHttpRequest();
    xhr.responseType = "json";

    //Let the user select what to do
    let topicOption = document.querySelector("#topicSelection");
    topicOption = topicOption.options[topicOption.selectedIndex].text;

    let countSelection = document.querySelector("#countSelection");
    countSelection = countSelection.options[countSelection.selectedIndex].text;
    
    url+= "topic=" + topicOption + "&count=" + countSelection;

    xhr.onreadystatechange = function() {
	if (this.readyState == XMLHttpRequest.DONE) {
	    responseReceivedHandler(this.response);
	}
    }
    
    xhr.open("GET", url, true);
    xhr.send();

}

/* TODO: Add responseReceivedHandler() here
 receives request response displays quotes in an ordered list
 should be as follows:

   let html = "<ol>";
   for (let c = 1; c <= count; c++) {
      html += `<li>Quote ${c} - Anonymous</li>`;
   }
   html += "</ol>";

   document.querySelector("#quotes").innerHTML = html;

If the response is an error, it should instead be:
Topic 'TOPIC_VAR' not found
*/

function responseReceivedHandler(response){
    console.log(response);
    let html;
    
    if (response.error){
	html = response.error;
    }
    
    
    else{
	    
	    html = "<ol>";
	    for (let i = 0; i < response.length; i++){
		html+= "<li>" + response[i].quote + " - " + response[i].source;
	    }
	    html += "</ol>";
	}
    
    
    document.querySelector("#quotes").innerHTML = html;
}