//de api sleutel, doen we later magie mee om te zorgen dat hij niet zo maar gekopieerd wordt (de typefout in your is niet opzettelijk)
let api_key = "pleasedontstealmyapikeyyoucanjustgetyorownforfree"
//de url van de wordnik API
let url1 = "https://api.wordnik.com/v4/words.json/randomWords?hasDictionaryDef=true&minCorpusCount=50&maxCorpusCount=-1&minDictionaryCount=20&maxDictionaryCount=-1&minLength=6&maxLength=6&limit=12&api_key="
//de url van de IMGur API
let url2 = "https://api.imgur.com/3/gallery/search/top/all/1?q=";
//een heleboel hulp variabele, ik heb vorige keer object oriented programming uitgelegd, maar dit is nog lekker decleratief 
let woorden;
let woord;
let plaatjes;
let plaatje;
let knoppen = [];
let titel;

//dit is een p5js functie de library die ik gebruik, gaat af zodra de pagina laadt
function setup() {
  noCanvas();
  laadApi();
}

//de functie die communiceert met de APIs async zodat we de await functionaliteit kunnen gebruiken 
async function laadApi() {
  try {
    // als er nog knoppen op het scherm staan, haal ze weg
    while (knoppen.length)
      knoppen.pop().remove();
    //laat een wacht berichtje zien, communiceren met APIs kan even duren...  
    let wacht = createDiv("een ogenblik er wordt overlegd met de APIs...")
    //api sleutel decodeer magie
    let q = [65, 84, 85, 86, 75, 3, 6, 87, 10, 77, 75, 21, 86, 82, 13, 91, 64, 3, 66, 91, 8, 87, 29, 64, 9, 23, 81, 81, 88, 89, 66, 74, 66, 5, 81, 67, 78, 89, 74, 13, 69, 13, 81, 10, 70, 83, 75, 83, 1];
    let p = ["3", "b", "5", "8", "6", "7", "5", "7", "3", "9", "e", "4", "3", "5", "3"];
    let x = ""
    let a = []
    for (let i = 0; i < api_key.length; i++) {
      a.push(api_key.charCodeAt(i));
    }
    for (let i = 0; i < api_key.length; i++) {
      x += String.fromCharCode(a[i] ^ q[i]);
    }
    //roep de Wordnik API aan, x is nu de API sleutel na voorgaande magie
    let wordnik_res = await fetch(url1 + x);
    //haal uit de JSON string die we van Wordnik krijgen de lijst met woorden en stop die in het object woorden
    woorden = await wordnik_res.json();
    //kies een willekeurig woord uit de lijst
    woord = random(woorden).word
    //roep de IMGur API aan met het net gekozen woord 
    let imgur_res = await fetch(url2 + woord, {
      method: "GET",
      headers: {
        //voeg de authenticatie header toe
        "Authorization": "Client-ID " + p.reverse().join(""),
      }
    });
    //haal uit de JSON string van IMGur de informatie en stop die in het object plaatjes
    plaatjes = await imgur_res.json()
    let link = ""
    //als IMGur iets heeft kunnen vinden
    if (plaatjes.data.length) {
      //kies een willekeurig resultaat
      let d = random(plaatjes.data);
      //als dat resultaat een album is kies dan een willekeurig plaatje uit dat album en pak die link
      if (d.is_album)
        link = random(d.images).link
      else //anders pak de link van dit plaatje
        link = d.link
      //bewaar de titel van het plaatje voor de hint  
      titel = d.title.toLowerCase()
      //maak van het plaatje een afbeelding op de site en als we daar klaar mee zijn roepen we addOptions aan
      plaatje = createImg(link, "plaatje", addOptions)
    }
    //als IMGur geen resultaten heeft gevonden zet een melding in de console en herstart het spel
    else {
      console.error("lege array voor woord: " + woord);
      resetSpel(-1);
    }
    //we hebben resultaat van beide APIs haal het wacht bericht weg
    wacht.remove();
  } catch (err) {
    //als eer iets mis gaat zet dat in de console en herstart het spel
    console.error(err)
    resetSpel(-1);
  }
}

function addOptions() {
  //zorg dat het plaatje maximaal 500px hoog en breed is, en behoud de verhouding van het plaatje
  let max = plaatje.width > plaatje.height ? 0 : 1;
  let verhouding = max ? plaatje.height / 500 : plaatje.width / 500;
  if (verhouding > 1)
    plaatje.size(plaatje.width / verhouding, plaatje.height / verhouding);
  //voeg de hint link toe  
  knoppen.push(createDiv("klik hier voor een hint").mousePressed(giveHint))
  //voeg alle woorden die we van Wordnik hebben gekregen als knop toe, en als iemand op de knop klikt roep check aan
  for (let i = 0; i < woorden.length; i++) {
    if (i % 4 == 0) knoppen.push(createDiv(""));
    knoppen.push(createP(woorden[i].word).mousePressed(() => check(woorden[i].word)))
  }
}


function check(w) {
  //als de gok goed is resetSpel met argument 1, anders met 0
  if (w == woord)
    resetSpel(1)
  else
    resetSpel(0);
}

function resetSpel(r) {
  //de ronde is voorbij haal het plaatje en de knoppen weg
  if (r >= 0)
    plaatje.remove();
  while (knoppen.length)
    knoppen.pop().remove();
  //laat tekst zien op basis van het argument (goed/fout/error)
  if (r == 1) knoppen.push(createDiv("Goed! ga zo door!"))
  if (r == 0) knoppen.push(createDiv("Fout! het goede antwoord was: " + woord + " geef niet op!"))
  if (r == -1) knoppen.push(createDiv("Sorry, er ging iets mis :("))
  //voeg een knop toe om nog een ronde te spelen
  knoppen.push(createP("begin opnieuw").mousePressed(laadApi))
}

function giveHint() {
  //de code om de hint link te vervangen met de titel van het plaatje waarbij het woord vervangen wordt door underscores.
  this.elt.innerText = titel.replace(woord, '______');
}