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/ΑΟΡΑΤΟΣ.jpeg"
        },
        "Αφίσα": {
          "meaning": ["Η αφίσα είναι ένα μεγάλο χαρτί που δείχνει, ανακοινώνει ή διαφημίζει κάτι. Υπάρχει και ηλεκτρονική."],
          "example": ["Στο σχολείο μας κάθε φορά που υπάρχει μια γιορτή ετοιμάζουν πολύ όμορφες αφίσες και τις κρεμάνε στην είσοδο."],
          "image": "img/ΑΦΙΣΑ.jpg"
        },
        "Διασκεδάζω": {
          "meaning": ["Όταν περνάω ωραία, επειδή κάνω κάτι που μου αρέσει", "Όταν κάνω κάποιον να περνάει όμορφα."],
          "example": ["Ο Κώστας διασκεδάζει παίζοντας ποδόσφαιρο.", "Ο τραγουδιστής μας διασκέδασε πολύ με τις επιτυχίες του."],
          "image": "img/ΔΙΑΣΚΕΔΑΖΩ.JPG"
        },
        "Έκπληξη": {
          "meaning": ['Το συναίσθημα που νιώθω, όταν δεν περιμένω να γίνει κάτι.'],
          "example": ['Οι φίλοι της έκαναν μια υπέροχη έκπληξη για τα γενέθλιά της.'],
          "image": "img/ΕΚΠΛΗΞΗ.jpeg"
        },
        "Ενθουσιασμός": {
          "meaning": ['Το συναίσθημα που νιώθω όταν χαίρομαι πολύ με κάτι.'],
          "example": ['Η Κατερίνα ένιωσε μεγάλο ενθουσιασμό όταν είδε το μικρό κουτάβι να την περιμένει στο σπίτι της.'],
          "image": "img/ΕΝΘΟΥΣΙΑΣΜΟΣ.jpeg"
        },
        "Θέση": {
          "meaning": ['Tο μέρος που βρίσκεται κάτι.', 'Η σειρά.', 'Το κάθισμα.', 'Η άποψη, η γνώμη για κάτι.', 'Η κατάσταση στην οποία βρίσκεται κάποιος.'],
          "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": ""
        },
        "Περηφάνια": {
          "meaning": ['Όταν αισθάνομαι χαρούμενος με αυτά που έχω καταφέρει να κάνω.'],
          "example": ['Νιώθω μεγάλη περηφάνια που κατάφερα να πάρω το πρώτο βραβείο για τους καλύτερους βαθμούς της τάξης!'],
          "image": "img/ΠΕΡΗΦΑΝΙΑ.jpeg"
        },
        "Σημαντικό": {
          "meaning": ['Αυτό που έχει μεγάλη σημασία, που αξίζει το ενδιαφέρον μας.'],
          "example": ['Είναι πολύ σημαντικό να δείχνουμε τα συναισθήματά μας και να μην κρυβόμαστε.'],
          "image": ""
        },
        "Συγκίνηση": {
          "meaning": ['Το συναίσθημα που νιώθω όταν χαίρομαι ή λυπάμαι πολύ.'],
          "example": ['Η μητέρα μου ένιωσε μεγάλη συγκίνηση όταν με είδε για πρώτη φορά να ανεβαίνω στη σκηνή.'],
          "image": "img/ΣΥΓΚΙΝΗΣΗ.jpeg"
        },
        "Συναίσθημα": {
          "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);
}