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

const dictionary = {
  "Αφήγηση": {
    "definition": "Είναι η διαδικασία  να λέμε και να γράφουμε ιστορίες.",
    "example": "Η αφήγηση του παραμυθιού από τον δάσκαλο μας ταξίδεψε σε μέρη φανταστικά.",
    "image": "img/ΑΦΗΓΗΣΗ.jpg"
  },
  "Αφηγητής/αφηγήτρια": {
    "definition": "Αυτός ή αυτή που παρουσιάζει μια ιστορία.",
    "example": "Ο αφηγητής του μύθου ήταν ένας σοφός γέρος.",
    "image": "img/ΑΦΗΓΗΤΗΣ.jpg"
  },
  "Πλοκή": {
    "definition": "Η εξέλιξη της ιστορίας.",
    "example": "Η πλοκή του παραμυθιού ήταν συναρπαστική, γεμάτη μαγεία.",
    "image": "img/ΠΛΟΚΗ.jpg"
  },
  "Ήρωας/ηρωίδα": {
    "definition": "Ο κεντρικός χαρακτήρας σε μια ιστορία.",
    "example": "Η ηρωίδα της ιστορίας ήταν μια δυναμική γυναίκα.",
    "image": "img/Ήρωας_Ηρωίδα.jpg"
  },
  "Σκηνικό": {
    "definition": "Ο χώρος μιας θεατρικής παράστασης.",
    "example": "Το σκηνικό της ιστορίας ήταν τόσο ζωντανό που ένιωθα σαν να ήμουν εκεί.",
    "image": "img/ΣΚΗΝΙΚΟ.jpg",
  },
  "Προσφώνηση": {
    "definition": "Ο τρόπος με τον οποίο απευθυνόμαστε σε κάποιον ή κάποια.",
    "example": "Η προσφώνηση «φίλε» σε ένα γράμμα δείχνει οικειότητα.",
    "image": "img/empty.jpg"
  },
  "Αποφώνηση": {
    "definition": "Τα τελευταία λόγια, το κλείσιμο. ",
    "example": "Πριν την αποφώνηση έβαλαν διαφημίσεις.",
    "image": "img/empty.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 = `Δεν μπόρεσα να βρω τη λέξη <span>"${word}"</span>. Παρακαλώ, δοκίμασε να ψάξεις μια άλλη λέξη!`
  }
  else {
    container.classList.add("active");
    document.querySelector(".meaning span").innerText = dictionary[word].definition;
    document.querySelector(".example span").innerHTML = dictionary[word].example;
    document.querySelector(".wimage img").src = dictionary[word].image;
    document.querySelector(".wimage img").alt = word;
  }
}
