import { CmsItem, IChapter, ILesson } from "../schema";
import { Api } from "./Api";
import { ChapterView } from "./ChapterView";
import { Course } from "./Course";
import { Lesson } from "./Lesson";

export class Chapter {
  chapter: CmsItem<IChapter, any>;
  course: Course;
  UPDATE = "https://cms.tybo.co.za/api/cms/update-data-item.php";
  lessons: Lesson[] = [];
  dom: HTMLDivElement;
  index: number;
  lessonsListDom = document.createElement("ul");
  constructor(data: CmsItem<IChapter, any>, index: number, course: Course) {
    this.chapter = data;
    this.index = index;
    this.course = course;
    this.dom = document.createElement("div");
    this.chapter.data.Lessons?.forEach((lesson, index) => {
      if (lesson) {
        const newLesson = new Lesson(lesson, index, this);
        this.lessons.push(newLesson);
      }
    });
    this.configure();
  }
  get isFirstChapter() {
    return this.index === 0;
  }
  initAddLesson() {
    if (!this.course.contentSection) return;
    this.course.contentSection.innerHTML = "";
    const form = document.createElement("form");
    form.classList.add("card");
    form.style.maxWidth = "800px";
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");
    const title = document.createElement("h4");
    title.classList.add("card-title", "mb-3");
    title.innerHTML = "Add Lesson";
    cardBody.appendChild(title);
    form.appendChild(cardBody);
    form.appendChild(this.createLessonForm());
    this.course.contentSection.appendChild(form);
  }
  deleteLesson(lesson: Lesson) {
    if (confirm("Are you sure you want to delete this lesson?")) {
      const index = lesson.index;
      lesson.dom.remove();
      this.lessons.splice(index, 1);
      this.chapter.data.Lessons.splice(index, 1);
      this.update(true);
      this.course.contentSection.innerHTML = "";
      this.renderLessons();
    }
  }
  createLessonForm(): HTMLElement {
    const group = document.createElement("div");
    group.classList.add("form-group");
    const input = document.createElement("input");
    const label = document.createElement("label");
    label.innerHTML = "Title";
    input.classList.add("form-control", "mb-3");
    group.appendChild(label);
    group.appendChild(input);
    const type = document.createElement("select");
    type.classList.add("form-select", "mb-3");
    const options = ["Text", "Video", "Quiz", "Pdf Viewer"];
    options.forEach((option) => {
      const optionElement = document.createElement("option");
      optionElement.innerHTML = option;
      optionElement.value = option;
      type.appendChild(optionElement);
    });
    group.appendChild(type);
    const submit = document.createElement("button");
    submit.classList.add("btn", "btn-primary");
    submit.innerHTML = "Add";
    submit.onclick = () => {
      const newLesson: ILesson = {
        Title: input.value,
        Type: type.value,
        Content: "",
        Link: "",
      };
      this.chapter.data.Lessons.push(newLesson);
      const lesson = new Lesson(newLesson, this.lessons.length, this);
      this.lessons.push(lesson);
      this.update();
      this.course.contentSection.innerHTML = "";
      this.renderLessons();
    };
    group.appendChild(submit);
    return group;
  }
  configure() {
    new ChapterView(this.dom, this);
  }
  renderLessons() {
    this.lessonsListDom.innerHTML = "";
    this.lessons.forEach((lesson) => {
      this.lessonsListDom.appendChild(lesson.dom);
    });
  }

  update(reload = false) {
    const api = new Api();
    api.postCall(this.UPDATE, this.chapter).then((data) => {
      console.log("Chapter updated", data);
      if (reload) location.reload();
    });
  }

  deleteChapter() {
    const api = new Api();
    api.deleteItem(this.chapter.id).then((data) => {
      console.log(data);
      location.reload();
    });
  }
}