import { Smc, fetchShader } from "./smc/lib.js";
import { PPTY } from "./ppty/lib.js";

main();

function showMain(debug) {
  document
    .querySelector("main")
    .animate(
      [
        { visibility: "visible" },
        { visibility: "visible", opacity: 1 }
      ],
      {
        duration: 400 * !debug,
        fill: "forwards",
      }
    );
}

function endBoot(root, debug) {
  if (root == null)
    return showMain();

  const style = getComputedStyle(root);
  const paddingLeft = parseFloat(style.paddingLeft);
  const paddingRight = parseFloat(style.paddingRight);
  const contentWidth = root.clientWidth - paddingLeft - paddingRight;
  const paddingTop = parseFloat(style.paddingTop);
  const paddingBottom = parseFloat(style.paddingBottom);
  const contentHeight = root.clientHeight - paddingTop - paddingBottom;

  root.style.width = `${contentWidth}px`;
  root.style.height = `${contentHeight}px`;

  const fade = root.animate(
    [{ opacity: 0 }],
    {
      duration: 400 * !debug,
      delay: 3000 * !debug,
      fill: "forwards",
    }
  );

  fade.onfinish = () => {
    root.remove();
    showMain();
  }
}

function main() {
  const boot = document.querySelector("#boot-ppty")
  new PPTY(
    boot,
    [
      {
        cps: 12,
        promptDelay: 0.5,
        commandDelay: 2.4,
        outputDelay: 1,
        blinkTime: 0.6,
      },
      {
        cps: 10,
        promptDelay: 0,
        commandDelay: 1.5,
        outputDelay: 1.2,
        blinkTime: 0.6,
      }
    ])
    .onfinish(endBoot)
    .run(false);

  const canvas = document.querySelector("#bg-canvas");
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);

  fetchShader("../shaders/segfault.glsl")
    .then(frag =>
      new Smc(canvas)
        .setMaxFps(30)
        .setProgram(builder =>
          builder
            .addFragmentShader(frag))
        .run()
    );
}