export class Website {
  dom: HTMLDivElement;
  pageId: string;
  aside: HTMLElement;
  banner: HTMLElement;
  contentSection: HTMLElement;
  banerSpan?: HTMLElement;
  previewLinkEl = document.createElement("a");
  editLinkEl = document.createElement("a");
  continueToNextLessonLinkEl = document.createElement("a");
  constructor() {
    const urlParams = new URLSearchParams(window.location.search);
    this.pageId = urlParams.get("page") || "";
    this.dom = document.createElement("div");
    this.aside = document.querySelector("#aside") as HTMLElement;
    this.banner = document.querySelector(".banner") as HTMLElement;
    if (this.banner) {
      this.banerSpan = this.banner.querySelector("span") as HTMLElement;
    }
    this.contentSection = document.querySelector(
      "#content-section"
    ) as HTMLElement;
    this.configure();
  }
  configure() {
    [
      this.previewLinkEl,
      this.editLinkEl,
      this.continueToNextLessonLinkEl,
    ].forEach((el) => {
      el.classList.add("btn", "btn-primary");
    });
    this.previewLinkEl.href = "?page=preview";
    this.previewLinkEl.innerHTML = "Preview";

    this.editLinkEl.href = "?page=edit";
    this.editLinkEl.innerHTML = "Edit";

    this.continueToNextLessonLinkEl.href = "?page=live";
    this.continueToNextLessonLinkEl.innerHTML = "Continue to next lesson";
  }

  setEmptyState() {
    const emptyState = document.querySelector("#empty-state") as HTMLElement;
    if (emptyState && this.contentSection) {
      const copy = document.importNode(emptyState, true);
      this.contentSection.innerHTML = copy.innerHTML;
    }
  }

  setCourseTitle(title: string) {
    if (this.banerSpan) {
      const h6 = document.createElement("h6");
      h6.innerHTML = title;
      this.banerSpan.appendChild(h6);
      h6.style.width = "fit-content";
      this.apendLinks();
    }
  }
  apendLinks() {
    if (this.isEditMode && this.banerSpan) {
      this.banerSpan.appendChild(this.previewLinkEl);
    }
  }
  get isEditMode() {
    return this.pageId === "edit" || this.pageId === "";
  }
}