import { IQuestion, IOption } from "../schema";
import { Lesson } from "./Lesson";
import { UtilCard } from "./UtilCard";
import { Utils } from "./Utils";

export class QuizCard {
  card: UtilCard;
  index = 0;
  dom: HTMLDivElement;
  questionList: IQuestion[] = [];
  constructor(parent: HTMLElement, lesson: Lesson) {
    this.dom = document.createElement("div");
    this.card = new UtilCard(parent);

    // Populate the questionList with questions from the lesson
    if (lesson.lesson.Questions?.length) {
      this.questionList = lesson.lesson.Questions;
    }

    // Render the first question
    this.render();
  }

  next() {
    this.index++;
    if (this.index < this.questionList.length) {
      this.render();
    } else {
      // User has completed all questions
      alert("Congratulations! You have completed all questions.");
      // You can add additional logic here, such as redirecting to another page or showing a completion message.
    }
  }

  render() {
    this.dom.innerHTML = "";
    if (this.questionList.length > 0 && this.index < this.questionList.length) {
      const question = this.questionList[this.index];

      // Render question heading with Bootstrap class
      const questionHeading = document.createElement("h2");
      questionHeading.className = "h4 mt-4 mb-3";
      questionHeading.textContent = question.Question;
      this.dom.appendChild(questionHeading);

      // Render options with Bootstrap classes
      const optionsContainer = document.createElement("div");
      optionsContainer.className = "form-check";
      question.Options.forEach((option, index) => {
        const formCheckDiv = document.createElement("div");
        formCheckDiv.className = "form-check";

        const input = document.createElement("input");
        input.type = "radio";
        input.className = "form-check-input";
        input.name = `question_${this.index}_options`; // Assign unique name to each set of radio buttons
        input.id = `option_${this.index}_${index}`;
        input.value = option.Option;

        const label = document.createElement("label");
        label.className = "form-check-label";
        label.htmlFor = input.id;
        label.textContent = option.Option;

        formCheckDiv.appendChild(input);
        formCheckDiv.appendChild(label);
        optionsContainer.appendChild(formCheckDiv);
      });
      this.dom.appendChild(optionsContainer);

      // Render next button with Bootstrap class
      const nextButton = document.createElement("button");
      nextButton.className = "btn btn-primary mt-3";
      nextButton.textContent = "Next";
      nextButton.addEventListener("click", () => this.next());
      this.dom.appendChild(nextButton);

      this.card.cardBody.appendChild(this.dom);
      this.card.cardHeder.style.display = "none";
      this.card.cardFooter.style.display = "none";
    }
  }
}