/* 
This is a modified version of code from webgl2fundamentals.org to test 2D Canvas performance.
Read more here: https://demyanov.dev/past-and-future-html-canvas-brief-overview-2d-webgl-and-webgpu
*/
let then = 0;
let app;

const stats = new Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);

class App {
    gl = null;
    units = [];
    imagesCount = 300;

    constructor() {
        const canvas = document.querySelector("#canvas");
        const ctx = canvas.getContext("2d");
        this.canvas = canvas;
        this.ctx = ctx;

        const textureInfos = [
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_01.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_02.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_03.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_04.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_05.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_06.png'),
        ];

        for (let i = 0; i < this.imagesCount; i++) {
            const speedMin = 30;
            const speedMax = 200;
            const speed = Math.random() * (speedMax - speedMin) + speedMin;

            const drawInfo = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                dx: Math.random() > 0.5 ? -1 : 1,
                dy: Math.random() > 0.5 ? -1 : 1,
                image: textureInfos[Math.random() * textureInfos.length | 0],
            };

            this.units.push(
                new Unit(speed, drawInfo)
            );
        }
    }

    loadImageAndCreateTextureInfo(url) {
        const img = new Image();

        const textureInfo = {
            width: 0,
            height: 0,
            image: img,
        };
        img.src = url;

        img.onload = () => {
            // resolve();
            textureInfo.width = img.width;
            textureInfo.height = img.height;
            textureInfo.image = img;
        };

        return textureInfo;
    }

    loop(time) {
        const now = time * 0.001;
        const deltaTime = Math.min(0.1, now - then);
        then = now;

        stats.begin();

        app.clearCanvas(app.ctx);
        app.units.forEach(function (unit) {
            unit.update(deltaTime, app.ctx.canvas.width, app.ctx.canvas.height);
            unit.draw(app.ctx);
        });

        stats.end();

        requestAnimationFrame(app.loop);
    }

    init() {
        requestAnimationFrame(this.loop);
    }

    clearCanvas(ctx) {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    }
}

window.onload = function () {
    app = new App();
    app.init();
}

class Unit {
    speed = 0;
    drawInfo = null;

    constructor(speed, drawInfo) {
        this.speed = speed;
        this.drawInfo = drawInfo;
    }

    draw(ctx) {
        ctx.drawImage(
            this.drawInfo.image.image,
            this.drawInfo.x,
            this.drawInfo.y,
            this.drawInfo.image.width,
            this.drawInfo.image.height,
        );
    }

    update(deltaTime, width, height) {
        this.drawInfo.x += this.drawInfo.dx * this.speed * deltaTime;
        this.drawInfo.y += this.drawInfo.dy * this.speed * deltaTime;
        if (this.drawInfo.x < 0) {
            this.drawInfo.dx = 1;
        }
        if (this.drawInfo.x >= width) {
            this.drawInfo.dx = -1;
        }
        if (this.drawInfo.y < 0) {
            this.drawInfo.dy = 1;
        }
        if (this.drawInfo.y >= height) {
            this.drawInfo.dy = -1;
        }
    }
}