import { Auth } from "../models.js";
import { LoadingMessage, fullChapterName, Button } from "../utils.js";

function Chapter(initialVNode) {
  let isLoading = false;
  let chapter = {};

  return {
    oninit: (vnode) => {
      document.title = "Manga chapter";

      isLoading = true;
      m.redraw();

      Auth.request({
        method: "GET",
        url: "/api/chapter/:site/:titleId/:chapterId",
        params: {
          site: vnode.attrs.site,
          titleId: vnode.attrs.titleId,
          chapterId: vnode.attrs.chapterId,
        },
      })
        .then((resp) => {
          chapter = resp;
          document.title = fullChapterName(chapter);
        })
        .finally(() => {
          isLoading = false;
        });
    },
    view: (vnode) => {
      if (isLoading) {
        return m("div.chapter.content", m(LoadingMessage));
      }

      const { site, titleId } = vnode.attrs;
      const prev = chapter.prev_chapter;
      const next = chapter.next_chapter;
      const buttons = m("div.chapter--buttons", [
        prev
          ? m(
              m.route.Link,
              {
                class: "touch-friendly",
                href: `/m/${site}/${titleId}/${prev.id}`,
              },
              [m("i.icon.icon-chevrons-left"), m("span", "prev")]
            )
          : m(Button, {
              text: "prev",
              icon: "chevrons-left",
              disabled: true,
            }),
        m(
          m.route.Link,
          {
            class: "touch-friendly",
            href: `/m/${site}/${titleId}`,
          },
          [m("i.icon.icon-list"), m("span", " chapter list")]
        ),
        next
          ? m(
              m.route.Link,
              {
                class: "touch-friendly",
                href: `/m/${site}/${titleId}/${next.id}`,
              },
              [m("span", "next"), m("i.icon.icon-chevrons-right")]
            )
          : m(Button, {
              text: "next",
              icon: "chevrons-right",
              disabled: true,
            }),
      ]);
      return m("div.chapter.content", [
        m("h1", fullChapterName(chapter)),
        buttons,
        m(
          "div",
          {
            class:
              "chapter--pages" + chapter.is_webtoon ? " chapter--webtoon" : "",
          },
          [chapter.pages.map((page) => m("img", { src: page }))]
        ),
        buttons,
      ]);
    },
  };
}

export default Chapter;

@@ -106,85 +106,351 @@
 %22;%0A%0A
-function Chapter(initialVNode) %7B%0A  let isLoading = false;%0A  let chapter = %7B%7D;
+const LoadingPlaceholder = %7B%0A  view: () =%3E m(%22h2%22, %5Bm(%22i.icon.icon-loader.spin%22)%5D),%0A%7D;%0A%0Afunction Chapter(initialVNode) %7B%0A  let isLoading = false;%0A  let chapter = %7B%7D;%0A  let loadedPages = %5B%5D;%0A  let pendingPages = %5B%5D;%0A%0A  function loadNextPage() %7B%0A    loadedPages.push(%7B%0A      completed: false,%0A      src: pendingPages.splice(0, 1)%5B0%5D,%0A    %7D);%0A  %7D
 %0A%0A  
@@ -852,34 +852,8 @@
 %3E %7B%0A
-          chapter = resp;%0A
     
@@ -901,16 +901,108 @@
 apter);%0A
+          chapter = resp;%0A          pendingPages = chapter.pages;%0A          loadNextPage();%0A
         
@@ -2591,17 +2591,32 @@
 pages%22 +
- 
+%0A              (
 chapter.
@@ -2652,16 +2652,17 @@
 on%22 : %22%22
+)
 ,%0A      
@@ -2683,60 +2683,470 @@
    %5B
-chapter.pages.map((page) =%3E m(%22img%22, %7B src: page %7D))
+%0A            loadedPages.map((page) =%3E %5B%0A              m(%22img%22, %7B%0A                src: page.src,%0A                style: %7B display: page.completed ? %22block%22 : %22none%22 %7D,%0A                onload: (ev) =%3E %7B%0A                  page.completed = true;%0A                  loadNextPage();%0A                %7D,%0A              %7D),%0A              page.completed ? %22%22 : m(LoadingPlaceholder),%0A            %5D),%0A            pendingPages.map((page) =%3E m(LoadingPlaceholder)),%0A          
 %5D%0A  

load pages one at a time and in order