import { Chapter } from "./Chapter";
import { UtilButton } from "./UtilButton";
import { Utils } from "./Utils";

export class ChapterView {
  parent: HTMLElement;
  heading: HTMLHeadingElement;
  items: HTMLDivElement;
  dom: HTMLDivElement;
  chapter: Chapter;
  icons = [
    {
      name: "Text",
      icon: "bi bi-blockquote-left",
    },
    {
      name: "Video",
      icon: "bi bi-camera-video",
    },
    {
      name: "Quiz",
      icon: "bi bi-ui-radios",
    },
    {
      name: "Pdf Viewer",
      icon: "bi bi-file-earmark-pdf",
    },
  ];
  constructor(parent: HTMLElement, chapter: Chapter) {
    this.dom = document.createElement("div");
    this.parent = parent;
    this.chapter = chapter;
    this.heading = document.createElement("h5");
    this.items = document.createElement("div");
    this.configire();
    parent.appendChild(this.dom);
  }
  configire() {
    this.dom.classList.add("chapter-view");
    if (this.chapter.course.isEdit) {
      this.heading.contentEditable = "true";
      this.heading.onblur = () => {
        this.chapter.chapter.data.Name = this.heading.innerHTML;
        this.chapter.update();
      };
    }
    this.heading.innerHTML = this.chapter.chapter.data.Name;
    this.heading.classList.add("chapter-title");
    this.chapter.lessons.forEach((lesson) => {
      const lessonView = document.createElement("div");
      lessonView.classList.add(
        "lesson-view",
        "d-flex",
        "gap-1",
        "align-items-center"
      );
      const icon = this.icon(lesson.lesson.Type);
      const p = document.createElement("p");
      p.innerHTML = lesson.lesson.Title;
      lessonView.appendChild(icon);
      lessonView.appendChild(p);
      this.items.appendChild(lessonView);
      lessonView.onclick = () => {
        lesson.openEdit();
      };
    });

    // wrap heading with delete button
    if (this.chapter.course.isEdit) {
      const wrapper = Utils.spaceBetweenGroup();
      const deleteButton = Utils.trashIcon();

      wrapper.appendChild(this.heading);
      wrapper.appendChild(deleteButton);
      this.dom.appendChild(wrapper);

      deleteButton.onclick = () => {
        this.chapter.deleteChapter();
      };
    } else {
      this.dom.appendChild(this.heading);
    }
    this.dom.appendChild(this.items);
    this.chapter.course.isEdit && this.configureAdd(this.dom);
  }
  icon(type: string) {
    const i = document.createElement("i");
    const icon = this.icons.find((icon) => icon.name === type) || {
      icon: "bi bi-file-earmark-text",
    };
    i.className = icon.icon;
    return i;
  }

  configureAdd(parent: HTMLDivElement) {
    const button = new UtilButton(
      parent,
      `<i class="bi bi-plus"></i> Add lesson`,
      "btn-light"
    );
    button.button.onclick = () => this.chapter.initAddLesson();
    // const button = document.createElement("button");
    // button.classList.add("btn", "btn-dark-outline", "btn-sm", "mb-3");
    // button.innerHTML = `<i class="bi bi-plus"></i> Add lesson`;
    // parent.appendChild(button);
    // button.onclick = () => this.initAddLesson();
  }
}