class statusView extends WindozDomContent {

    times = [];
    fps;
    prevTime = Date.now(); 
    frames = 0;
    paused = false;

    DOMContentLoaded() {
        
        ui.eicfy(this.el);
        this.fps = 0;

        if(performance && performance.memory) {
            this.memchart = new BarChart(this.find('.metrics [eicbarchart].memory'), {
                title: '',
                maxPlot: 20,
                data: [ ]
            });
        } else {
            this.find('.metrics [eicbarchart].memory').parentElement.remove();
        }
        
        if(window.requestAnimationFrame) {
            this.fpschart = new BarChart(this.find('.metrics [eicbarchart].fps'), {
                title: '',
                maxPlot: 20,
                data: [ ]
            });

            window.requestAnimationFrame(this.loop.bind(this));
        }

        // start monitoring services
        this.tickerId = setInterval(this.tick.bind(this), 1000);
        
        this.contents = new DataGrid(this.find('.contents'), {
            headers: [
                {label: 'ID', sortable:true, filter: 'text'},
                {label: 'class', sortable:true, filter: 'text'},
                {label: 'type', sortable:true, filter: 'list'},
            ],
            height: '200px'
        });

        this.assets = new DataGrid(this.find('.assets'), {
            headers: [
                {label: 'type', sortable:true, filter: 'list'},
                {label: 'resource', sortable:true, filter: 'text'},
            ],
            height: '200px'
        });
        
        this.refresh();
    }

    refresh() {
        this.contents.clear();

        for(let i = 0; i < Controller._contents.length; i++) {
            let item = Controller._contents[i];
            this.contents.addRow(item.view._sparcId, [ item.view._sparcId, item.view._className, item.type ]);
        }

        this.assets.clear();
        
        for(let type in app.Assets.Store) {
            let group = app.Assets.Store[type];
            for(let resource in group) {
                this.assets.addRow('', [ type, resource ]);
            }
        }
    }

    tick() {

        if(performance && performance.memory) {
            let memory = performance.memory;
            let current = Math.round(100 * Math.round( memory.usedJSHeapSize / 1024) / 1024) / 100;
            let max = Math.round( memory.jsHeapSizeLimit / 1024) / 1024;

            this.memchart.options.title = '<tspan large>' + current + '</tspan> <tspan small>Mb (' + Math.round(1000 * (memory.totalJSHeapSize / memory.jsHeapSizeLimit)) / 10 + '%)</tspan>'
            this.memchart.add({value: current, severity: 'info'});
        } 
        
        this.fpschart.options.title = '<tspan large>' + this.fps + '</tspan> <tspan small>fps</tspan>';
        this.fpschart.add({value: this.fps + 1, severity: 'info'});
    }


    loop() {
        
        const time = Date.now();
        this.frames++;
        if (time > this.prevTime + 1000) {
            this.fps = Math.round( ( this.frames * 1000 ) / ( time - this.prevTime ) );
            this.prevTime = time;
            this.frames = 0;
        }
        
        if(!this.paused) window.requestAnimationFrame(this.loop.bind(this));
    }

    DOMContentFocused() { this.refresh(); }

    DOMContentRemoved() {
        
        if(this.tickerId) { clearInterval(this.tickerId); }
        this.paused = true;
    }

}

app.registerClass('statusView', statusView);