const answerContainers = document.querySelectorAll(".answers");
const imagesContainer = document.querySelectorAll(".grid-item");
const answers = document.querySelector(".answers"); // Answers container, will hold the audio elements-answers
let step = 0; //step++ whenever the correct answer is selected
const checkBtn = document.querySelector(".bi-check-square");
const messageEl = document.querySelector("#message");

const audio1 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper " aria-hidden="true">
                        Ασθενοφόρο
                        <audio controls>
                        <source src="./resources/audio1.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
                `;
const audio2 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper" aria-hidden="true">
                        Βρυση Ντουζ
                        <audio controls>
                        <source src="./resources/audio2.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
                `;
const audio3 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper " aria-hidden="true">
                        Πόρτα που κλείνει
                        <audio controls>
                        <source src="./resources/audio5.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>`;
const audio4 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper" aria-hidden="true">
                        Νερό βροχής
                        <audio controls>
                        <source src="./resources/audio3.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>`;
const audio5 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper" aria-hidden="true">
                        Ξυπνητήρι
                        <audio controls>
                        <source src="./resources/audio4.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>`;
const audio6 = `
                <div class="audio-line-num">
                    <span class="num"></span>
                    <div class="audio-wrapper" aria-hidden="true">
                        Πουλί που κελαηδάει
                        <audio controls>
                        <source src="./resources/audio6.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>`;

const nextRound = (correct_val) => {
  const num = document.getElementById("single-digit");
  if (num.value == correct_val) {
    checkBtn.classList.add("checked-bg");
    messageEl.innerText = "Μπράβο!";
    messageEl.style.color = "green";
    step++;
    setTimeout(() => {
      changeImage();
      checkBtn.classList.remove("checked-bg");
      messageEl.innerText = "Έλεγχος Απάντησης:";
      messageEl.style.color = "";
    }, 1000);
  } else {
    checkBtn.classList.add("wrong-bg");
    messageEl.innerText = "Ξαναπροσπάθησε!";
    messageEl.style.color = "red";
    setTimeout(() => {
      checkBtn.classList.remove("wrong-bg");
      messageEl.innerText = "Έλεγχος Απάντησης:";
      messageEl.style.color = "";
    }, 1000);
  }
};

checkBtn.addEventListener("click", (e) => {
  if (step == 0) {
    //Sink
    nextRound("1");
  } else if (step == 1) {
    //Door
    nextRound("2");
  } else if (step == 2) {
    //Ambulance
    nextRound("3");
  } else if (step == 3) {
    //Alarm Clock
    nextRound("3");
  } else if (step == 4) {
    //Rain
    nextRound("1");
  } else if (step == 5) {
    nextRound("1");
  }
});

//audio1: Ambulance
//audio2: Rain
//audio3: Door
//audio4: Sink
//audio5: Alarm
//audio6: Bird

const changeImage = () => {
  if (step == 0) {
    //Sink
    imagesContainer[0].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio4;
    answers.innerHTML += audio6;
    answers.innerHTML += audio2;
    ennumerateAudio();
  } else if (step == 1) {
    //Door
    imagesContainer[0].classList.add("d-none");
    imagesContainer[1].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio1;
    answers.innerHTML += audio3;
    answers.innerHTML += audio5;
    ennumerateAudio();
  } else if (step == 2) {
    //Ambulance
    imagesContainer[1].classList.add("d-none");
    imagesContainer[2].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio3;
    answers.innerHTML += audio6;
    answers.innerHTML += audio1;
    ennumerateAudio();
  } else if (step == 3) {
    //Alarm clock
    imagesContainer[2].classList.add("d-none");
    imagesContainer[3].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio4;
    answers.innerHTML += audio2;
    answers.innerHTML += audio5;
    ennumerateAudio();
  } else if (step == 4) {
    //Rain
    imagesContainer[3].classList.add("d-none");
    imagesContainer[4].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio4;
    answers.innerHTML += audio1;
    answers.innerHTML += audio2;
    ennumerateAudio();
  } else if (step == 5) {
    //Bird
    imagesContainer[4].classList.add("d-none");
    imagesContainer[5].classList.remove("d-none");
    answers.innerHTML = "";
    answers.innerHTML += audio6;
    answers.innerHTML += audio3;
    answers.innerHTML += audio5;
    ennumerateAudio();
  }
};

const ennumerateAudio = () => {
  const answerContainer = answers.querySelectorAll("span");
  for (let i = 0; i < answerContainer.length; i++) {
    answerContainer[i].innerText = `${i + 1}`;
  }
};
changeImage();
