const container = document.querySelector(".container"),
      dropdown = document.getElementById("dropdownMenu"),
      infoText = container.querySelector(".info-text");

const dictionary = {
        "Αερόστατο": {
          "meaning": ["Ένας μεγάλος σάκος γεμάτος με ζεστό αέρα ή με κάποιο άλλο αέριο, ελαφρύτερο από τον αέρα με ένα μεγάλο καλάθι δεμένο στο κάτω μέρος του."],
          "example": ["Η οικογένεια Γκρίφιν ταξίδεψε με ένα μεγάλο, πολύχρωμο αερόστατο ψηλά στον ουρανό."],
          "image": "img/αερόστατο.jpg"
        },
       "Αξιοθέατο (αξιοθέατα)": {
          "meaning": ["Κάτι που αξίζει κάποιος να το επισκεφθεί ή να το δει σε έναν τόπο."],
          "example": ["Όταν πήγαμε εκδρομή στη Θεσσαλονίκη, το πιο εντυπωσιακό αξιοθέατο που είδαμε ήταν ο Λευκός Πύργος."],
          "image": "img/λευκός πύργος.jpg"
        },
        "Αποστολέας": {
          "meaning": ["Αυτός που στέλνει ένα γράμμα ή ένα δέμα σε κάποιον, συνήθως με το ταχυδρομείο."],
          "example": ["Ο αποστολέας έγραψε το όνομα του φίλου του στον φάκελο και έβαλε το γράμμα στο γραμματοκιβώτιο."],
          "image": "img/αποστολέας.jpg"
        },
        "Γραμματόσημο": {
          "meaning": ["Το κολλάμε σ' έναν φάκελο, μια καρτ ποστάλ ή ένα δέμα για να δείξουμε ότι έχουμε πληρώσει και ότι μπορούμε να το στείλουμε με το ταχυδρομείο."],
          "example": ["Βάλαμε ένα όμορφο γραμματόσημο με πεταλούδα πάνω στον φάκελο πριν τον στείλουμε."],
          "image": "img/γραμματόσημο.jpg"
        },
        "Καρτ ποστάλ": {
          "meaning": ["Όταν πηγαίνουμε κάπου για διακοπές, την στέλνουμε σε φίλους και γνωστούς με φωτογραφίες από τα μέρη που επισκεφτήκαμε."],
          "example": ["Όταν ήμασταν σε διακοπές, έστειλα μια καρτ ποστάλ με μια όμορφη παραλία στους φίλους μου."],
          "image": "img/καρτ ποσταλ.jpg"
        },
        "Κορυφή": {
          "meaning": ["Το ψηλότερο σημείο ενός βουνού, ενός λόφου, ενός δέντρου ή κάποιου άλλου πράγματος."],
          "example": ["Ανεβήκαμε στην κορυφή του κτηρίου και απολαύσαμε την καταπληκτική θέα από εκεί ψηλά."],
          "image": "img/κορυφή.jpg"
        },
        "Κτήριο": {
          "meaning": ["Μεγάλη κατασκευή που την έχουμε χτίσει με τσιμέντο κι άλλα υλικά."],
          "example": ["Το καινούριο κτήριο της βιβλιοθήκης στην πόλη μας έχει πολλά βιβλία και είναι πολύ όμορφο."],
          "image": "img/κτήριο.jpg"
        },
        "Παραλήπτης": {
          "meaning": ["Αυτός που λαμβάνει ένα γράμμα ή ένα δέμα από κάποιον."],
          "example": ["Ο παραλήπτης ήταν πολύ χαρούμενος όταν έλαβε το γράμμα από τον ξάδερφό του."],
          "image": "img/παραλήπτης.jpg"
        },
        "Παραμύθι": {
          "meaning": ["Φανταστική ιστορία που διαβάζουμε ή διηγούμαστε για να περάσουμε ευχάριστα την ώρα μας."],
          "example": ["Η καινούργια γέφυρα στην πόλη είναι τόσο μεγάλη και εντυπωσιακή, που μοιάζει με γέφυρα από παραμύθι."],
          "image": "img/παραμύθι.jpg"
        },
        "Σύμβολο": {
          "meaning": ["Ο Παρθενώνας είναι το σύμβολο της Ελλάδας. Όταν βλέπουμε τον Παρθενώνα, σκεφτόμαστε την Ελλάδα."],
          "example": ["Ο Παρθενώνας είναι το σύμβολο της Ελλάδας."],
          "image": "img/σύμβολο.jpg"
        },
      };

function search() {
   container.classList.remove("active");
   infoText.style.color = "#000";

    var word = dropdown.options[dropdown.selectedIndex].text;

    infoText.innerHTML = `Αναζήτηση του γράμματος <span>"${word}"</span>`;

    if (!dictionary[word]) {
        infoText.innerHTML = ``
    }
    else {
          container.classList.add("active"); 
          const content = document.getElementById('content');   
          content.innerHTML = "";
          keys = Object.keys(dictionary);

          const len = dictionary[word]['meaning'].length;
          const with_num = len > 1; 
          for (var k = 0; k < len; k++) {
                  mean_example(dictionary[word], k, 'meaning', 'Τι σημαίνει;');
                  mean_example(dictionary[word], k, 'example', 'Παράδειγμα', with_num);
          }
          if (dictionary[word]['image'].length > 0) {
              const newLi = document.createElement('li');
              newLi.setAttribute('class', 'wimage');
    
              const newDiv = document.createElement('div');
              newDiv.setAttribute('class', 'details image');
    
              const newImg = document.createElement('img');
              newImg.setAttribute('src', dictionary[word]['image']);
              newImg.setAttribute('alt', word);
    
              newDiv.appendChild(newImg);
              newLi.appendChild(newDiv);
              content.appendChild(newLi);
          }      
     }
}

function mean_example(word, k, clss, str, with_num) {
    const newLi = document.createElement('li');
    newLi.setAttribute('class', clss);

    const newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'details');

    const newP = document.createElement('p');
    const newSpan = document.createElement('span');

    const num = (with_num) ? String(k+1) : "";
    newP.textContent = str + " " + num;
    newSpan.textContent = word[clss][k];

    newDiv.appendChild(newP);
    newDiv.appendChild(newSpan);

    newLi.appendChild(newDiv);
    content.appendChild(newLi);
}