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