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

export class EditLesson {
  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("edit-lesson");
    this.dom.style.maxWidth = "800px";
    let editor: Editor;

    // Title
    const t = "Title";
    const title = new UtilInput(this.dom, this.lsn, t, "text", t);
    title.input.style.fontWeight = "bold";

    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") {
      editor = new Editor(this.dom, this.lesson.lesson.Content);

      const voice = new UtilInput(
        this.dom,
        this.lesson.lesson,
        "Recording",
        "file",
        `<i class="bi bi-record2" style="color: red"></i> Upload recording`
      );
    }

    // Submit
    const button = new UtilButton(this.dom, "Save", "btn-primary");
    const deleteButton = new UtilButton(this.dom, "Save", "btn-danger");
    button.button.onclick = () => {
      if (editor?.editorElement?.innerHTML)
        this.lesson.lesson.Content = editor.editorElement.innerHTML;
      this.handleSave();
    };
    deleteButton.button.style.marginTop = "1rem";
    deleteButton.button.innerHTML = "Delete Lesson";
    deleteButton.button.onclick = () => {
      this.lesson.chapter.deleteLesson(this.lesson);
    };
  }
  renderPdf(parent: HTMLDivElement) {
    new UtilInput(parent, this.lesson.lesson, "Link", "text", "Pdf Link");
    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);
    }


  }
  renderVideo(parent: HTMLDivElement) {
    new UtilInput(parent, this.lesson.lesson, "Link", "text", "YouTube Link");
    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);
    }
  }

  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);
  }
}