"use strict";

const FpsView = (function(){

    const FpsView = function(hollow_bond){

        const self = this;
        let root_element = null, 
            frame_count = 0, 
            last_time = performance.now();

        this.destroy = () => {
            if(root_element && root_element.parentNode){
                root_element.remove();
                root_element = null;
            };
        };

        this.go = () => {
            self.destroy();

            root_element = hollow_bond.html(hollow_bond.item_self, ["div", {
                "class" : "fps-hud"
            }, [
                ["span", {"class" : "fps-label"}, "FPS: "], 
                ["span", {"class" : "fps-value"}, "60"]
            ]])[0];

            return self;
        };

        /**
         * Llamado desde el bucle de render principal (requestAnimationFrame)
         */
        this.tick = () => {
            if(!root_element)
                return;

            const now = performance.now();

            frame_count++;

            if(now - last_time >= 1000){

                const value = root_element.querySelector(".fps-value");

                if(value)
                    value.textContent = String(frame_count);

                frame_count = 0;
                last_time = now;
            };
            
        };

    };

    return FpsView;
})();