// @ts-check

import parsePng from "./parsePng.js";
import parseHash from "./parseHash.js";
import getNodeUi from "./getNodeUi.js";
import explorer from "./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 hash changes.
  const parsedHash = parseHash(location.hash);
  if (!parsedHash) {
    location.href = "..";
    return;
  }

  const { bytes } = parsedHash;

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