import * as PIXI from "pixi.js";
import { global, player } from "./main.ts";
import { part_texture_url, planet_texture_url } from "./textures.ts";

const PART_WIDTH = 25;
const PART_HEIGHT = 25;

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

  let app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  document
    .getElementById("gamewindow")!
    .appendChild(<HTMLCanvasElement>app.view);
  (<HTMLCanvasElement>app.view).classList.add("game");

  global.rendering = {
    app: app,
    player_text_map: new Map(),
    planet_sprite_map: new Map(),
    part_sprite_map: new Map(),
  };

  app.ticker.add(() => {
    // RENDER STAGE 1: UPDATE POSITION
    app.stage.setTransform(player()?.transform.x!, player()?.transform.y!);
    // RENDER STAGE 2: UPDATE SPRITES
    for (let [id, planet] of global.planets_map) {
      let planet_sprite;

      if (global.rendering!.planet_sprite_map.has(id)) {
        planet_sprite = global.rendering!.planet_sprite_map.get(id)!;
      } else {
        planet_sprite = PIXI.Sprite.from(
          planet_texture_url(planet.planet_type),
        );
        global.rendering!.app.stage.addChild(planet_sprite);
      }

      planet_sprite.height = planet.radius * 2;
      planet_sprite.width = planet.radius * 2;
      planet_sprite.x = planet.transform.x;
      planet_sprite.y = planet.transform.y;
      planet_sprite.rotation = planet.transform.rot;
    }
    // RENDER STAGE 3: UPDATE PARTS
    for (let [id, part] of global.parts_map) {
      let part_sprite;

      if (global.rendering!.part_sprite_map.has(id)) {
        part_sprite = global.rendering!.part_sprite_map.get(id)!;
      } else {
        part_sprite = PIXI.Sprite.from(part_texture_url(part.part_type));
        global.rendering!.app.stage.addChild(part_sprite);

        console.log(part.transform);
        part_sprite.height = PART_HEIGHT;
        part_sprite.width = PART_WIDTH;
        part_sprite.x = part.transform.x;
        part_sprite.y = part.transform.y;
        part_sprite.rotation = part.transform.rot;
      }
    }
  });
}