import { initializeContext, Vec2 } from "./common.js";
import { Graphics, fullscreenCanvas } from "./graphics.js";
import * as drawing from "./draw.js";

const vertexShader = 
    `#version 300 es
     
    in vec2 a_position;
    in vec4 a_color;
    out vec4 color;
    uniform vec2 u_resolution;
     
    void main() {
        vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;

        color = a_color;

        gl_Position = vec4(clipSpace.xy, 0.0, 1.0);
    }
`;

const fragmentShader = 
    `#version 300 es

    precision highp float;
    in vec4 color;
    out vec4 outColor;

    void main() {
      outColor = color;
    }
`;



function draw(gfx: Graphics) {
    const position: Vec2 = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);

    gfx.clear(0, 0, 0, 0);
    gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
    drawing.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
    drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
}

(() => {
    const canvasId = "game";
    const ctx = initializeContext(canvasId);
    if (ctx === null) return;

    const gfx = new Graphics(ctx, vertexShader, fragmentShader);
    fullscreenCanvas(gfx, canvasId);

    const a_position = gfx.createAttribute("a_position");
    a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);

    const a_color = gfx.createAttribute("a_color");
    a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);

    gfx.createUniform("u_resolution");
    
    draw(gfx);
    window.onresize = () => {
        fullscreenCanvas(gfx, canvasId);
        draw(gfx);
    }
})();