// Template pen without animations: https://codepen.io/sfi0zy/pen/zYoxdbw

const UNIFORMS = Object.freeze({
    canvas_height:  'u_canvas_height',
    canvas_width:   'u_canvas_width',
    time:           'u_time',
    mouse_x:        'u_mouse_x',
    mouse_y:        'u_mouse_y'
});


const DEFAULT_UNIFORM_VALUES = Object.freeze({
    u_canvas_height: 1,
    u_canvas_width:  1,
    u_time:          0,
    u_mouse_x:       window.innerWidth / 2,
    u_mouse_y:       window.innerHeight / 2
});


class Example {
    constructor(options) {
        this.options = options;
        this.canvas = document.getElementById(options.canvas);
        this.gl = this.canvas.getContext('webgl');
        this.program = null;
        this.uniforms = {};

        this.clearCanvas();
        this.createPlane();
        this.createProgram();
        
        for (const uniform in UNIFORMS) {
            this.setUniform(UNIFORMS[uniform],
                DEFAULT_UNIFORM_VALUES[UNIFORMS[uniform]]);
        }
        
        this.onResize();
        this.initEventListeners();
        this.draw();
    }


    clearCanvas() {
        this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    }


    createPlane() {
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.gl.createBuffer());
        this.gl.bufferData(
            this.gl.ARRAY_BUFFER,
            new Float32Array([
                -1, -1,
                -1,  1,
                1, -1,
                1,  1
            ]),
            this.gl.STATIC_DRAW
        );
    }


    createProgram() {
        const shaders = this.getShaders();

        this.program = this.gl.createProgram();

        this.gl.attachShader(this.program, shaders.vertex);
        this.gl.attachShader(this.program, shaders.fragment);
        this.gl.linkProgram(this.program);

        const vertexPositionAttribute = this.gl.getAttribLocation(this.program, 'a_position');

        this.gl.enableVertexAttribArray(vertexPositionAttribute);
        this.gl.vertexAttribPointer(vertexPositionAttribute, 2, this.gl.FLOAT, false, 0, 0);

        this.gl.useProgram(this.program);
    }


    getShaders() {
        return {
            vertex: this.compileShader(
                this.gl.VERTEX_SHADER,
                document.getElementById(this.options.shaders.vertex).textContent
            ),
            fragment: this.compileShader(
                this.gl.FRAGMENT_SHADER,
                document.getElementById(this.options.shaders.fragment).textContent
            )
        };
    }


    compileShader(type, source) {
        const shader = this.gl.createShader(type);

        this.gl.shaderSource(shader, source);
        this.gl.compileShader(shader);

        console.log(this.gl.getShaderInfoLog(shader));

        return shader;
    }


    setUniform(name, value) {
        this.gl.uniform1f(this.gl.getUniformLocation(this.program, name), value);

        this.uniforms[name] = value;
    }


    onResize() {
        this.canvas.height = window.innerHeight;
        this.canvas.width = window.innerWidth;

        this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);

        this.setUniform(UNIFORMS.canvas_height, this.canvas.height);
        this.setUniform(UNIFORMS.canvas_width,  this.canvas.width);
    }
    

    onMouseMove(e) {  
        this.setUniform(UNIFORMS.mouse_x, e.clientX);
        this.setUniform(UNIFORMS.mouse_y, e.clientY);
    }


    initEventListeners() {
        window.addEventListener('resize', this.onResize.bind(this));

        document.addEventListener('mousemove', this.onMouseMove.bind(this));
    }


    draw(timeStamp) {
        this.setUniform(UNIFORMS.time, timeStamp / 1000.0);

        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);

        requestAnimationFrame(this.draw.bind(this));
    }
}


const example = new Example({
    canvas: 'canvas',
    shaders: {
        vertex: 'vertex-shader',
        fragment: 'fragment-shader'
    }
});