import { IQuestion } from "../schema";
import { Lesson } from "./Lesson";
import { QuizCard } from "./QuizCard";
import { UtilButton } from "./UtilButton";
import { UtilCard } from "./UtilCard";
import { UtilInput } from "./UtilInput";
import { UtilInputGroup } from "./UtilInputGroupCheck";
import { UtilList } from "./UtilList";

export class Quiz {
  questions: IQuestion[];
  dom: HTMLDivElement;
  lesson: Lesson;
  constructor(lesson: Lesson) {
    this.lesson = lesson;
    if (!lesson.lesson.Questions) lesson.lesson.Questions = [];
    this.questions = lesson.lesson.Questions;
    this.dom = document.createElement("div");
    lesson.chapter.course.isEdit && this.renderQuestions();
    !lesson.chapter.course.isEdit && this.takeQuiz();
  }
  takeQuiz() {
    new QuizCard(this.dom, this.lesson);
  }

  renderQuestions() {
    this.dom.innerHTML = ""; // Clear existing DOM elements
    console.log("Lessons", this.lesson.lesson.Questions);

    this.questions.forEach((question, index) => {
      const questionDom = this.createQuestion(question, index);
      this.dom.appendChild(questionDom);
    });
    this.renderAddQuestion();
  }

  createQuestion(question: IQuestion, index: number) {
    const card = new UtilCard(this.dom);
    const input = new UtilInput(
      card.cardHeder,
      question,
      "Question",
      "text",
      `Question ${index + 1}`
    );
    input.input.style.fontWeight = "bold";
    input.input.style.fontSize = "1rem";
    input.group.style.boxShadow = "none";
    input.input.readOnly = !this.lesson.chapter.course.isEdit;
    card.card.classList.add("mb-3");
    this.appendOptions(card.cardBody, question);
    return card.card;
  }
  appendOptions(parentQuestion: HTMLElement, question: IQuestion) {
    const ul = new UtilList(parentQuestion);
    question.Options.forEach((option, optionIndex) => {
      // const li = document.createElement("li");
      const li = ul.addListItem(true);
      const g = new UtilInputGroup(li, option, "IsCorrect", "Option");
      g.setPlaceholder(`Option ${optionIndex + 1}`);
    });
    this.renderAddOption(question, ul.ul);
  }
  renderAddOption(question: IQuestion, ul: HTMLElement) {
    const li = document.createElement("li");
    const button = new UtilButton(
      li,
      `<i class="bi bi-plus"></i> Add Option`,
      "btn-light"
    );
    button.button.onclick = () => {
      question.Options.push({ Option: "", IsCorrect: false });
      this.appendOptions(li, question);
      this.renderQuestions();
    };
    ul.appendChild(li);
  }

  updateCorrectness(
    questionIndex: number,
    optionIndex: number,
    isChecked: boolean
  ) {
    this.questions[questionIndex].Options[optionIndex].IsCorrect = isChecked;
  }

  renderAddQuestion() {
    const button = new UtilButton(
      this.dom,
      `<i class="bi bi-plus"></i> Add Question`,
      "btn-light"
    );
    button.button.onclick = () => {
      this.questions.push({
        Question: "",
        Options: [{ Option: "", IsCorrect: false }],
      });
      this.renderQuestions();
    };
  }
}