{% extends "base.html" %}

{% block body %}
  <main class="container-fluid">
    <h1 class="text-center">Quiz The Word</h1>
    <div class="row justify-content-center">
      <div class="col-md col-lg-7 align-content-center question">
        <div class="card question-content">
          <h5 id="question-text"></h5>
          <button id="btn-show-answer" class="btn btn-secondary show-answer">Show Answer</button>
          <p id="question-answer" class="d-none answer"></p>
          <div id="bible-verses"></div>
        </div>
      </div>
    </div>

    <ul class="nav nav-pills justify-content-center mt-2">
      <li class="nav-item" role="presentation">
        <button class="nav-link active difficulty-selection" id="btn-show-easy" type="button" aria-controls="easy" aria-selected="true">Easy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection" id="btn-show-medium" type="button" aria-controls="medium" aria-selected="false">Medium
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% block scripts %}
  <script>
      let questions = [
          {{ easy.get_dict()|tojson }},
          {{ medium.get_dict()|tojson }},
          {{ hard.get_dict()|tojson }},
      ];
      let difficulty_selection = $(".difficulty-selection");
      let btn_show_answer = $("#btn-show-answer");
      let question_answer = $("#question-answer");
      let current_difficulty = 1;

      change_difficulty(current_difficulty);

      difficulty_selection.on("click", (event) => {
          difficulty_selection.removeClass("active");
          let target = $(event.target);
          target.addClass("active");
          if (target.prop("innerText") === "Easy") {
              current_difficulty = 1;
          } else if (target.prop("innerText") === "Medium") {
              current_difficulty = 2;
          } else {
              current_difficulty = 3;
          }
          change_difficulty(current_difficulty);
      })

      btn_show_answer.on("click", showAnswer);

      function change_difficulty(difficulty) {
          let question = questions[difficulty-1];
          if (question["answer_visible"]) {
              btn_show_answer.css("display", "none");
              question_answer.removeClass("d-none");
          } else {
              btn_show_answer.css("display", "block");
              question_answer.addClass("d-none");
          }
          $("#question-text").text(question["question_text"]);
          question_answer.text(question["answer"]);
          $("#bible-verses").text(question["addresses"]);
      }

      function showAnswer() {
          questions[current_difficulty-1]["answer_visible"] = true;
          question_answer.removeClass("d-none");
          btn_show_answer.css("display", "none");
      }
  </script>
{% endblock %}