"use strict";

/*
Another exercise to repeat classes:

[ x ] 1. Build a form with an input field for an ID (number) and a submit button.
[ x ] 2. Write a class to call the Chuck Norris Jokes API and get the Joke with the given ID.
[ X ] 3. Add another button "Random joke" on your website that asks the API for a random joke.
[ x ] 4. Display the joke as a nice CSS-styled quote on the page.

API:
http://www.icndb.com/api/ 
*/
class ChuckNorrisApi {
  // Setting up the properties, we need in our class
  constructor() {
    this.apiUrl = "https://api.icndb.com/jokes";
    this.idEndpoint = "/{id}";
    this.randomEndpoint = "/random";

    // Registering the form events
    this.registerEvents();
  }

  registerEvents() {
    // Get the needed elements
    const form = document.querySelector(".form-inline");
    const button = document.querySelector("#random");
    const input = form.querySelector(".form-control");
    
    button.addEventListener("click", () => {
      
    const urlRandom = `${this.apiUrl}${this.randomEndpoint}`;
    console.log("URL", urlRandom);
      
    // Call the API and get joke data
    $.getJSON(urlRandom).then(data => {const randomJoke =  this.filterResults(data);
    console.log("Random joke", randomJoke);

     // Update the div element to have the new text inside
     document.querySelector("#joke").innerHTML = `<q>${randomJoke}</q>`;})
   
    })

    // Add the event, when the form is submitted
    form.addEventListener("submit", e => {
      // Prevent the default to stop sending the form to the URL by the browser
      e.preventDefault();

      // Get the id from the input field
      const id = input.value.trim();

      this.getJoke(id).then(response => {
        console.log(response);

        // Filter the joke to the data we need (as it is having too many properties)

        const joke = this.filterResults(response);
        
        console.log("Joke", joke)

        // Update the div element to have the new text inside
        document.querySelector("#joke").innerHTML = `<q>${joke}</q>`;
      }).catch(err => throw err);
    });
  }

  getJoke(id, callback) {
    // Create the whole URL to get the data
    const endpoint = this.idEndpoint.replace("{id}", id);
    const url = `${this.apiUrl}${endpoint}`;

    console.log("get data", url);
  // Return a promise with this jQuery
    return $.getJSON(url);
  }

  filterResults(data) {
    console.log("filter data", data);

    // Filter the joke property
    return data.value.joke;
  }
}


const jokeMachine = new ChuckNorrisApi();
console.log(jokeMachine);