let word_id = '';

const wordList = document.getElementById("letter-list");
const words = Object.keys(dictionary);

words.forEach(word => {
  const newLi = document.createElement('li');
  newLi.textContent = word;
  newLi.setAttribute("class", "");
  wordList.append(newLi);

  newLi.addEventListener("click", () => wordContent(word))
});

wordContent('ΣΕΝΑΡΙΟ');

//Listener
function wordContent(word){
  word_id = word;
  const wordListChilder = wordList.children;

  for (let i =0; i < wordListChilder.length; i++) {
    if (wordListChilder[i].textContent === word) {
      wordListChilder[i].setAttribute("class", "active");
    } 
   else {
    wordListChilder[i].setAttribute("class", "");
   }
  }
  showWords(word);
}

function showWords(word) {
  const wordList = document.getElementById("word-list");
  wordList.innerHTML = ""; 

  const words = dictionary[word];
  if (words) {
          const li = document.createElement("li");
          li.innerHTML = words.meaning;
          wordList.appendChild(li);
          if (words.images.length == 1) {
              addNewImage(wordList, 0);
          }
  } else {
      const li = document.createElement("li");
      li.textContent = "Δεν βρέθηκαν λέξεις.";
      wordList.appendChild(li);
  }
}

function addimage(i) {
  const wordList = document.getElementById("word-list");
  imgLi = document.querySelector('.wimage img');

  if (!imgLi) {
      addNewImage(wordList, i);
  } else {
    imgLi.setAttribute('src', dictionary[word_id].images[i]);
    imgLi.setAttribute('alt', word_id);
  }
}

function addNewImage(wordList, i) {
  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_id].images[i]);
  newImg.setAttribute('alt', word_id);

  newDiv.appendChild(newImg);
  newLi.appendChild(newDiv);
  wordList.appendChild(newLi);
}