class UI
{
    constructor( engine , map )
    {
        this.engine = engine;
        this.map = map;

        this.ui = new Sparrow.UI( this.engine );
        this.engine.addUI( this.ui );

        this.intro = new Intro( this.ui , this.map );
        this.shop = new Shop( this.ui , this.map );
        this.gameOver = new GameOver( this.ui , this.map );
        this.victory = new Victory( this.ui , this.map );

        this.lbl_crystals = this.ui.add( new Sparrow.UI.Label( "◆ Crystals: 0" , { position: "right" , width: 200 , x: 10 , textAlign: "right" , font: "monospace" , textColor: "#ffffff" } ) );
        this.lbl_impact = this.ui.add( new Sparrow.UI.Label( "Asteroid impact in "+Map.IMPACT_TIME+"s" , { position: "center" , width: 300 , textAlign: "center" , font: "monospace" , textColor: "#ffffff" } ) );

        this.ui.add( new Sparrow.UI.Label( "WASD, 🡹🡸🡻🡺: Drive | SPACE: Brake | R: Restart" , { position: "right" , x: 10 , verticalPosition: "bottom" , width: 600 , textAlign: "right" , font: "monospace" , textColor: "#ffffff" , textSize: 16 } ) );

        // // label
        // var testLabel = this.ui.add( new Sparrow.UI.Label( "Label" , { x: 250 , y: 100 , textColor: "#ffffff" } ) );

        // // button
        // var testButton = this.ui.add( new Sparrow.UI.Button( "Button" , { x: 200 , y: 200 } ) );
        // //var testButton2 = testButton.addChild( new Sparrow.UI.Button( "#" , { position: "right" , width: 30 , backgroundColor: "#7777ff" , hover: { backgroundColor: "#aaaaff" } } ) );
        
        // // edit
        // var testEdit = this.ui.add( new Sparrow.UI.Edit( "Edit" , { x: 200 , y: 300 } ) );

        // // checkbox
        // var testCheckbox = this.ui.add( new Sparrow.UI.Checkbox( { x: 200 , y: 400 } ) );
        // testCheckbox.setChecked( true );
        // testCheckbox.setStr( "Checkbox" , { textColor: "#ffffff" } );

    }

    updateImpactTimer()
    {
        var impactStr = this.map.timeUntilImpact.toString();
        if ( impactStr.charAt(impactStr.length-2) !== "." ) impactStr += ".0";
        this.lbl_impact.setStr( "Asteroid impact in "+impactStr+"s" );
    }

    draw()
    {
        this.ui.draw();
    }
}