import { world, viewport } from "./../game.js";
import { renderer } from "./../video/video.js";
import * as event from "./../system/event.js";
import Renderable from "./../renderable/renderable.js";
import Sprite from "./../renderable/sprite.js";
import Stage from "./../state/stage.js";
import melonjs_logo from "./melonjs_logo.png";


// a basic progress bar object
class ProgressBar extends Renderable {
    /**
     * @ignore
     */
    constructor(x, y, w, h) {
        super(x, y, w, h);

        this.barHeight = h;
        this.anchorPoint.set(0, 0);

        event.on(event.LOADER_PROGRESS, this.onProgressUpdate, this);
        event.on(event.VIEWPORT_ONRESIZE, this.resize, this);

        this.anchorPoint.set(0, 0);

        // store current progress
        this.progress = 0;
    }

    /**
     * make sure the screen is refreshed every frame
     * @ignore
     */
    onProgressUpdate(progress) {
        this.progress = ~~(progress * this.width);
        this.isDirty = true;
    }

    /**
     * draw function
     * @ignore
     */
    draw (renderer) {
        // draw the progress bar
        renderer.setColor("black");
        renderer.fillRect(this.pos.x, viewport.centerY, renderer.getWidth(), this.barHeight / 2);

        renderer.setColor("#55aa00");
        renderer.fillRect(this.pos.x, viewport.centerY, this.progress, this.barHeight / 2);
    }

    /**
     * Called by engine before deleting the object
     * @ignore
     */
    onDestroyEvent() {
        // cancel the callback
        event.off(event.LOADER_PROGRESS, this.onProgressUpdate);
        event.off(event.VIEWPORT_ONRESIZE, this.resize);
    }

};

/**
 * the melonJS Logo
 * @ignore
 */
class IconLogo extends Sprite {
    constructor(x, y) {
        // TODO: create a sprite or texture from a Base64 encoded image
        var image = new Image();
        image.src = melonjs_logo;
        super(x, y, {
            image : image,
            framewidth : 256,
            frameheight : 256
        });
    }
}

/**
 * a default loading screen
 * @ignore
 */
class DefaultLoadingScreen extends Stage {
    /**
     * call when the loader is resetted
     * @ignore
     */
    onResetEvent() {
        var barHeight = 8;

        // set a background color
        world.backgroundColor.parseCSS("#202020");

        // progress bar
        world.addChild(new ProgressBar(
            0,
            renderer.getHeight() / 2,
            renderer.getWidth(),
            barHeight
        ), 1);

        // melonJS logo
        world.addChild(new IconLogo(
            renderer.getWidth() / 2,
            (renderer.getHeight() / 2)

        ), 2);
    }
};

export default DefaultLoadingScreen;

@@ -143,25 +143,21 @@
 %0Aimport 
-Renderabl
+Sprit
 e from %22
@@ -172,25 +172,21 @@
 derable/
-renderabl
+sprit
 e.js%22;%0Ai
@@ -183,37 +183,41 @@
 ite.js%22;%0Aimport 
-Sprit
+Renderabl
 e from %22./../ren
@@ -216,37 +216,41 @@
 ./../renderable/
-sprit
+renderabl
 e.js%22;%0Aimport St
@@ -1648,372 +1648,8 @@
 %7D;%0A%0A
-/**%0A * the melonJS Logo%0A * @ignore%0A */%0Aclass IconLogo extends Sprite %7B%0A    constructor(x, y) %7B%0A        // TODO: create a sprite or texture from a Base64 encoded image%0A        var image = new Image();%0A        image.src = melonjs_logo;%0A        super(x, y, %7B%0A            image : image,%0A            framewidth : 256,%0A            frameheight : 256%0A        %7D);%0A    %7D%0A%7D%0A%0A
 /**%0A
@@ -2124,24 +2124,164 @@
     ), 1);%0A%0A
+        // TODO: create a sprite or texture from a Base64 encoded image%0A        var image = new Image();%0A        image.src = melonjs_logo;%0A%0A
         // m
@@ -2323,16 +2323,14 @@
 new 
-IconLogo
+Sprite
 (%0A  
@@ -2376,17 +2376,16 @@
         
-(
 renderer
@@ -2404,19 +2404,121 @@
  / 2
-)%0A%0A
+, %7B%0A                image : image,%0A                framewidth : 256,%0A                frameheight : 256%0A  
         
 ), 2
@@ -2517,12 +2517,24 @@
     
+  %7D
 ), 2
+%0A        
 );%0A 

fix a regression with a "cannot access XXXXX before initialization" error