var API = {
   
   CORS: 'https://cors-anywhere.herokuapp.com/', //needed to get around HTTPS vs HTTP conflict
   baseURL: 'http://www.wordgamedictionary.com/api/v1/references/scrabble/',
   key: '7.304453775081076e29',
   
   generateURL: function(wordToCheck) {
      //takes in a word and returns a properly formatted URL for the API
      return this.CORS + this.baseURL + wordToCheck + '?key=' + this.key;
   },
   callAPI: function(word) {
      //generate a URL for the specified word, then call the fetch API
      return fetch(API.generateURL(word), { method: 'get' })
      //get the response in a string format
      .then(response => response.text())
      //parse the response to XML
      .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
      //store the response in the wordInfo object
      .then(data => wordInfo.apiResponse = data)
      //check the response xml for whether it's a scrabble word
      .then(() => wordInfo.checkValidScrabble())
      //error to trigger if no successful response
      .catch(error => {
         console.log("API error: cannot contact the dictionary");
         API.displayError();
      })
   },
   displayError: function() {
      //display an error to the user on screen
      //"Sorry, cannot contact the dictionary at this time."
      document.getElementById("response-message").textContent = "Sorry, cannot contact the dictionary at this time.";
   }
}

var wordInfo = {
   
   //the current word under consideration
   word: '',
   //the raw xml response received via the API for this word
   apiResponse: null,
   isValidScrabble: null,
   
   checkWordNow: function() {
      //method to call the API for this word
      return API.callAPI(this.word);
   },
   checkValidScrabble: function() {
      //check the API response to see if it's a valid scrabble word
      if(this.apiResponse) {
         //pull the 0 or 1 value out of the xml
         this.isValidScrabble = this.apiResponse.getElementsByTagName("scrabble")[0].textContent;
         //check the value and display on screen
         document.getElementById("response-message").textContent = this.word + ": " + this.isValidScrabble;
      }
   },
   clearWord: function() {
      this.word = '';
      this.apiResponse = null;
      this.isValidScrabble = null;
      //also clear the display message
   }
}

var searchButton = document.getElementById("scrabble-search");
searchButton.addEventListener("click", function() {
   var searchInput = document.getElementById("scrabble-word").value;
   //run validation checks here
   //api will error if it receives punctuation in the word
   //if it passes validation:
   wordInfo.word = searchInput;
   wordInfo.checkWordNow();
});