// Funktion, um eine zufällige Frage auszuwählen
function getRandomQuestion() {
  randomIndex = Math.floor(Math.random() * wordLists[0].length);
  while (usedIndices.includes(randomIndex)){
    if (usedIndices.length != wordLists[0].length){
      randomIndex = Math.floor(Math.random() * wordLists[0].length);
    }
    else {
      usedIndices = [];
      randomIndex = Math.floor(Math.random() * wordLists[0].length);
    }
  }

  usedIndices.push (randomIndex)
  const randomQuestion = wordLists.map(list => {
    return list[randomIndex];
  });

  return randomQuestion;
}

const randomizeButton = document.getElementById("randomize-button");
const scrollingWordsBoxes = document.querySelectorAll(".scrolling-words-box ul");
const permQuestions = document.querySelectorAll(".perm-questions h1")
var usedIndices = [];
var dur = 3800;
var run = 0;

randomizeButton.addEventListener("click", function () {
  scrollingWordsBoxes.forEach((box, index) => {
    if (index!=0){
    box.style.animation = `scrollUp 1.5s forwards ${-(6/(index+3))}s 3`;
  }
    else {
      box.style.animation = `scrollUp 1.5s forwards 2`;
    }
  });

  
  permQuestions.forEach((text, index) => {
    if (dur == 10) {
      (index == 1) ? text.classList.remove ("fade-ani-u") : text.classList.remove ("fade-ani");
      void text.offsetWidth;
    }
    else {
      text.classList.remove ("erst");
      void text.offsetWidth;
      (index == 1) ? text.classList.add ("fadeIn-ani-u") : text.classList.add ("fadeIn-ani");
    }
    });
  

  

  setTimeout(function () {
    const randomQuestionWords = getRandomQuestion();

    scrollingWordsBoxes.forEach(box => {
      box.innerHTML = '';
      box.classList.remove ("scroll-animating")
      void box.offsetWidth;
    });
    

    scrollingWordsBoxes.forEach((box, index) => {
      const newQuestionItem = document.createElement("li");
      newQuestionItem.textContent = randomQuestionWords[index];
      box.appendChild(newQuestionItem);

      newQuestionItem.style.opacity = 0;

      permQuestions.forEach((text, index) => {
        if (run >= 2){
          (index == 1) ? text.classList.remove ("fadeIn-ani-u") : text.classList.remove ("fadeIn-ani");
          (index == 1) ? text.classList.add ("fade-ani-u") : text.classList.add ("fade-ani");
          console.log(run);
        }
        });


      setTimeout(function () {
        newQuestionItem.style.animation = "scrollUp 0.2s forwards 1";
        box.classList.add("scroll-animating");
      }, index * 90); 
      dur = 10;
    });
  }, dur); 
  run += 1;
});