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

main();

function endBoot(root) {
  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,
      delay: 3000,
      fill: "forwards",
    }
  );

  fade.onfinish = () => {
    root.remove();
    document
      .querySelector("main")
      .animate(
        [
          { visibility: "visible" },
          { visibility: "visible", opacity: 1 }
        ],
        {
          duration: 400,
          fill: "forwards",
        }
      );
  }
}

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

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