import { global, player } from "./main.ts";
import { part_texture, planet_texture } from "./textures.ts";
import { planet_color } from "./planet_colors.ts";

//let t = performance.now();
//let delta = 0.0;

export function startRender() {
  // hide the launch popup
  document.getElementById("server_selector")!.classList.add("hidden");
  // show the HUD
  document.getElementById("hud")!.classList.remove("hidden");
  // and chat
  document.getElementById("chat")!.classList.remove("hidden");
  // create the canvas
  let canvas = document.createElement("canvas");
  canvas.classList.add("game");
  // append it
  document.getElementById("gamewindow")!.appendChild(canvas);
  let ctx = canvas.getContext("2d")!;
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;

  window.onresize = () => {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  };

  global.rendering = {
    canvas: canvas,
    ctx: ctx,
  };
  //t = performance.now();
  //delta = 0.0;
  // start the render loop
  requestAnimationFrame(renderLoop);
}

async function renderLoop(_newT: DOMHighResTimeStamp) {
  //delta = newT - t;
  //t = newT;

  let viewer_size_x = global.rendering?.canvas.width!;
  let viewer_size_y = global.rendering?.canvas.height!;

  global.rendering!.canvas.style.setProperty(
    "background-position",
    `${player()?.transform.x! / 5}px ${-player()?.transform.y! / 5}px`,
  );

  global.rendering!.ctx.setTransform(1, 0, 0, 1, 0, 0);
  global.rendering!.ctx.clearRect(0, 0, viewer_size_x, viewer_size_y);

  // *dont* translate the camera. we're moving everything else around us. cameracentrism.
  // only translation will be to center our core module.

  global.rendering!.ctx.translate(viewer_size_x / 2, viewer_size_y / 2);

  /*
    todo: track indicator
     */

  for (let [_id, planet] of global.planets_map) {
    global.rendering!.ctx.drawImage(
      await planet_texture(planet.planet_type),
      planet.transform.x - planet.radius - player()?.transform.x!, // dx
      planet.transform.y - planet.radius - player()?.transform.y!, // dy
      planet.radius * 2, // dw
      planet.radius * 2, // dh
    );

    global.rendering!.ctx.beginPath();
    global.rendering!.ctx.strokeStyle = planet_color(planet.planet_type);
    global.rendering!.ctx.lineWidth = 5;
    global.rendering!.ctx.moveTo(
      player()!.transform.x - player()!.transform.x,
      player()!.transform.y - player()!.transform.y,
    );
    global.rendering!.ctx.lineTo(
      planet.transform.x - player()!.transform.x,
      planet.transform.y - player()!.transform.y,
    );
    global.rendering!.ctx.stroke();
  }

  for (let [_id, part] of global.parts_map) {
    global.rendering!.ctx.save();

    // x_{screen} = x_{world} - player_{x_{world}}
    // x_{world} = x_{screen} + player_{x_{world}}

    global.rendering!.ctx.translate(
      part.transform.x - player()!.transform.x,
      part.transform.y - player()!.transform.y,
    );

    global.rendering!.ctx.rotate(part.transform.rot);

    global.rendering!.ctx.drawImage(
      await part_texture(part.part_type),
      -25,
      -25,
      50,
      50,
    );

    global.rendering!.ctx.restore();

    // todo: clicked stuff
  }

  for (let [id, username] of global.players_map) {
    let part = global.parts_map.get(id);

    if (part !== undefined) {
      global.rendering!.ctx.save();

      global.rendering!.ctx.translate(
        part!.transform.x - player()!.transform.x,
        part!.transform.y - player()!.transform.y,
      );

      global.rendering!.ctx.textAlign = "center";
      global.rendering!.ctx.font =
        '30px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
      global.rendering!.ctx.fillStyle = "white";
      global.rendering!.ctx.fillText(username, 0, -35);

      global.rendering!.ctx.restore();
    }
  }

  // particles stuff

  requestAnimationFrame(renderLoop);
}