function loadFictions() {
  fetch("/fictionlist")
    .then(res => res.json())
    .then(data => {
      renderFictionList(data);
    });
};

function renderFictionList(data) {
  const links = data.map(item => {
    const link = dom("div");
    link.className = "fiction-list";
    link.innerText = item.name;
    link.addEventListener("click", event => {
      renderChapterList(item.id);
    });
    return link;
  });

  const mount = document.getElementById("content");
  mount.innerHTML = "";
  links.forEach(link => mount.appendChild(link));
};

function dom(tag) {
  return document.createElement(tag);
};

function att(dom, att) {
  for (let key in att) {
    dom.setAttribute(key, att[key]);
  }
};

function dstyle(dom, style) {
  for (let key in style) {
    dom.style[key] = style[key];
  }
};


function renderChapterList(fictionID) {
  fetch(`/chapterlist/${fictionID}`)
    .then(res => res.json())
    .then(data => {
      const content = dom("div");
      content.className = "chapter-list";
      data.forEach((x, index) => {
	const link = dom("div");
	link.innerHTML = x;
	link.addEventListener("click", event => {
	  renderChapter(fictionID, index);
	});
	content.appendChild(link);
      });

      const mount = document.getElementById("content");
      mount.innerHTML = "";
      mount.appendChild(content);
      window.scrollTo(0, 0);      
    });
};


function renderChapter(fictionID, chapterID) {
  fetch(`/chapter/${fictionID}/${chapterID}`)
    .then(res => res.json())
    .then(data => {
      const content = dom("div");
      content.className = "text";

      data[1].forEach(x => {
	const line = dom("div");
	line.innerHTML = x;
	content.appendChild(line);
      });
      
      const topOptContainer = buildOpt(fictionID, chapterID);
      const botOptContainer = buildOpt(fictionID, chapterID);
      const botPlacer = dom("div");
      botPlacer.className = "bottom-placer";
      const mount = document.getElementById("content");
      mount.innerHTML = "";

      mount.appendChild(topOptContainer);
      mount.appendChild(content);
      mount.appendChild(botOptContainer);
      mount.appendChild(botPlacer);
      
      window.scrollTo(0, 0);

      localStorage.setItem("fictHist", [ fictionID, chapterID ]);
    });
};


function buildOpt(fictionID, chapterID) {
  const preBut = dom("div");
  preBut.innerText = "上一章";

  if (chapterID == 0) {
    dstyle(preBut, { color: "grey" });
  } else {
    preBut.addEventListener(
      "click", () => renderChapter(fictionID, chapterID - 1)
    );
  };
  
  const nextBut = dom("div");
  nextBut.innerText = "下一章";
  nextBut.addEventListener(
    "click", () => renderChapter(fictionID, chapterID + 1)
  );

  const listBut = dom("div");
  listBut.innerText = "目录";
  listBut.addEventListener(
    "click", () => renderChapterList(fictionID)
  );
  
  const optContainer = dom("div");
  optContainer.appendChild(preBut);
  optContainer.appendChild(listBut);
  optContainer.appendChild(nextBut);
  optContainer.className = "opt-container";
  return optContainer;
};


function loadReaderHist() {
  const history = localStorage.getItem("fictHist");
  if (history) {
    // alertBox("已自动跳转到历史阅读记录");
    const [ fictionID, chapterID ] = history.split(",");
    renderChapter(fictionID, chapterID);
    return true;
  } else {
    return false;
  }
};


window.addEventListener("load", () => {
  // loadFictions();
  // const hasHistory = loadReaderHist();
  // if (!hasHistory) renderChapter(1, 0);
  renderChapter(1, parseInt(Math.random() * 100));
});