// @ts-check

import * as base64 from "../common/vendor/base64-js.js";
import parseGif from "./parseGif.js";
import getNodeUi from "./getNodeUi.js";
import explorer from "../common/explorer.js";

const errorEl = document.getElementById("error");
const explorerEl = document.getElementById("explorer");
if (!errorEl || !explorerEl) throw new Error("HTML is not set up correctly");

/**
 * @param {Element} element
 * @returns {number}
 */
const totalElementChildren = (element) => {
  let result = 1;
  for (const child of element.children) {
    result += totalElementChildren(child);
  }
  return result;
};

const main = () => {
  // TODO: We may want a better UI here.
  // TODO: Handle errors.
  const fileDataBase64 = window.sessionStorage.getItem("fileData");
  if (!fileDataBase64) {
    location.href = "..";
    return;
  }
  const bytes = base64.toByteArray(fileDataBase64);

  console.time("parseGif");
  const rootNode = parseGif(bytes);
  console.timeEnd("parseGif");
  if (!rootNode) {
    // TODO: Is there better UI than this?
    errorEl.removeAttribute("hidden");
    return;
  }

  console.time("render");
  explorerEl.innerHTML = "";
  explorerEl.append(explorer(rootNode, getNodeUi));
  explorerEl.removeAttribute("hidden");
  console.timeEnd("render");

  console.log(`Root node has ${totalElementChildren(explorerEl)} children`);
};

main();