// @ts-check

import * as base64 from "../common/vendor/base64-js.js";
import parsePng from "./parsePng.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");

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);

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

  explorerEl.innerHTML = "";
  explorerEl.append(explorer(rootNode, getNodeUi));
  explorerEl.removeAttribute("hidden");
};

main();