import { Editor } from "./Editor";
import { UtilInput } from "./UtilInput";
import { Lesson } from "./Lesson";
import { Quiz } from "./Quiz";
import { UtilButton } from "./UtilButton";
import { Utils } from "./Utils";
import { EmptyState } from "./EmptyState";

export class ViewLesson {
  lesson: Lesson;
  dom: HTMLDivElement;
  constructor(lesson: Lesson) {
    this.lesson = lesson;
    this.dom = document.createElement("div");
    this.configure();
  }
  get lsn() {
    return this.lesson.lesson;
  }
  get chp() {
    return this.lesson.chapter.chapter;
  }
  configure() {
    this.dom.classList.add("view-lesson");
    this.dom.style.maxWidth = "800px";
    this.dom.style.margin = "auto 1rem";
    let editor: Editor;

    // Title
    const title = Utils.heading("h1", this.lesson.lesson.Title);
    title.style.marginBottom = "2rem";
    this.dom.appendChild(title);
    if (this.lesson.lesson.Type === "Quiz") {
      this.rendQuiz(this.dom);
    }
    if (this.lesson.lesson.Type === "Video") {
      this.renderVideo(this.dom);
    }
    if (this.lesson.lesson.Type === "Pdf Viewer") {
      this.renderPdf(this.dom);
    }
    if (this.lesson.lesson.Type === "Text") {
      const div = document.createElement("div");
      div.innerHTML = this.lesson.lesson.Content;
      this.dom.appendChild(div);
      if (this.lesson.lesson.Recording) {
        const player = Utils.formGroup();
        Utils.createPlayer(player, this.lesson.lesson.Recording);
        player.style.marginTop = "2rem";
        this.dom.appendChild(player);
      }
    }
  }
  renderPdf(parent: HTMLDivElement) {
    if (this.lesson.lesson.Link) {
      const group = Utils.formGroup();
      const iframe = document.createElement("iframe");
      iframe.src = this.lesson.lesson.Link;
      iframe.width = "100%";
      iframe.height = "600";
      iframe.setAttribute("style", "border: none");
      group.appendChild(iframe);
      parent.appendChild(group);
    } else {
      new EmptyState(parent, "No PDF", "No PDF to display");
    }
  }
  renderVideo(parent: HTMLDivElement) {
    if (this.lesson.lesson.Link) {
      const group = Utils.formGroup();
      const iframe = document.createElement("iframe");
      iframe.src = this.lesson.lesson.Link;
      iframe.width = "100%";
      iframe.title = "YouTube video player";
      iframe.allow =
        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
      iframe.allowFullscreen = true;

      iframe.height = "300";
      group.appendChild(iframe);
      parent.appendChild(group);
    } else {
      new EmptyState(parent, "No Video", "No Video to display");
    }
  }

  handleSave() {
    console.log("Lesson", this.lesson.lesson);
    console.log("chapter", this.lesson.chapter.chapter);
    this.lesson.chapter.update();
  }
  rendQuiz(parent: HTMLDivElement) {
    const quiz = new Quiz(this.lesson);
    parent.appendChild(quiz.dom);
  }
}