class GameUI
{
    constructor( ui )
    {
        this.ui = ui;

        this.lbl_bg = this.ui.add( new Sparrow.UI.Label( "" , { position: "center" , verticalPosition: "bottom" , width: 375 , height: 95 , background: "background" , backgroundColor: "#ccaa88" , borderWidth: 1 , borderColor: "#554433" } ) );
        this.btn_house = this.lbl_bg.addChild( new Sparrow.UI.Button( "House ("+Config.HOUSE_PRICE+")" , { x: 5 , y: 5 , width: 180 , height: 40 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_house.onclick = () => {
            game.b_buildingMode = true;
            game.selectedBuilding = BuildingType.HOUSE;
        };
        this.btn_water = this.lbl_bg.addChild( new Sparrow.UI.Button( "Dew Collector ("+Config.WATER_PRICE+")" , { x: 5 , y: 50 , width: 180 , height: 40 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_water.onclick = () => {
            game.b_buildingMode = true;
            game.selectedBuilding = BuildingType.WATER;
        };
        this.btn_farm = this.lbl_bg.addChild( new Sparrow.UI.Button( "Farm ("+Config.FARM_PRICE+")" , { x: 190 , y: 5 , width: 180 , height: 40 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_farm.onclick = () => {
            game.b_buildingMode = true;
            game.selectedBuilding = BuildingType.FARM;
        };
        this.btn_police = this.lbl_bg.addChild( new Sparrow.UI.Button( "Police ("+Config.POLICE_PRICE+")" , { x: 190 , y: 50 , width: 180 , height: 40 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_police.onclick = () => {
            game.b_buildingMode = true;
            game.selectedBuilding = BuildingType.POLICE;
        };

        this.lbl_stats_bg = this.ui.add( new Sparrow.UI.Label( "" , { width: 250 , height: 190 , background: "background" , backgroundColor: "#ccaa88" , borderWidth: 1 , borderColor: "#554433" } ) ); 
        var yPos = 5;
        this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Mousetropolis" , { x: 5 , y: yPos , width: 240 , textSize: 30 } ) );
        yPos += 30;
        this.lbl_money = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Gold: "+game.money , { x: 5 , y: yPos , width: 240 , position: "left" , textAlign: "left" } ) );
        yPos += 25;
        this.lbl_population = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Population: "+game.population , { x: 5 , width: 240 , position: "left" , y: yPos , textAlign: "left" } ) );
        yPos += 25;
        this.lbl_homeless = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Homeless: "+game.population , { x: 5 , width: 240 , position: "left" , y: yPos , textAlign: "left" } ) );
        yPos += 25;
        this.lbl_water = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Water: "+game.water+" "+(game.waterProduction-game.waterConsumption) , { x: 5  , width: 240, position: "left" , y: yPos , textAlign: "left" } ) );
        yPos += 25;
        this.lbl_food = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Food: "+game.food+" "+(game.foodProduction-game.foodConsumption) , { x: 5 , width: 240 , position: "left" , y: yPos , textAlign: "left" } ) );
        yPos += 25;
        this.lbl_crime = this.lbl_stats_bg.addChild( new Sparrow.UI.Label( "Crime: "+game.crime+"%" , { x: 5 , width: 240 , position: "left" , y: yPos , textAlign: "left" } ) );
        yPos += 25;

        this.lbl_gameSpeed = this.ui.add( new Sparrow.UI.Label( "Game Speed: "+game.tickRate , { position: "right" , y: 5 , width: 230 } ) );
        this.btn_increaseGameSpeed = this.ui.add( new Sparrow.UI.Button( "+" , { position: "right" , x: 35 , y: 5 , width: 25 , height: 25 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_increaseGameSpeed.onclick = () => {
            game.tickRate += 0.5;
            if ( game.tickRate > 5 ) game.tickRate = 5;
            this.lbl_gameSpeed.setStr( "Game Speed: "+game.tickRate );
        };
        this.btn_decreaseGameSpeed = this.ui.add( new Sparrow.UI.Button( "-" , { position: "right" , x: 5 , y: 5 , width: 25 , height: 25 , backgroundColor: "#554433" , textColor: "#ffffff" , hover: { backgroundColor: "#776655" } } ) );
        this.btn_decreaseGameSpeed.onclick = () => {
            game.tickRate -= 0.5;
            if ( game.tickRate < 0.5 ) game.tickRate = 0.5;
            this.lbl_gameSpeed.setStr( "Game Speed: "+game.tickRate );
        };
        this.lbl_gameTime = this.ui.add( new Sparrow.UI.Label( "0s" , { position: "right" , x: 5 , y: 30 , width: 200 , textAlign: "right" } ) );

        this.lbl_popup = this.ui.add( new Sparrow.UI.Label( "TEST" , { position: "center" , y: 200 , width: 800 , textAlign: "center" , font: "sans-serif" , textSize: 30 } ) );
        this.lbl_popup.b_visible = false;

        this.ui.add( new Sparrow.UI.Label( "Right Click: Move Camera" , { verticalPosition: "bottom" , x: 5 , y: 62 , width: 300 , height: 20 , textSize: 16 , textColor: "#ffffff" } ) );
        this.ui.add( new Sparrow.UI.Label( "Mouse Wheel Click: Rotate Camera" , { verticalPosition: "bottom" , x: 5 , y: 42 , width: 300 , height: 20 , textSize: 16 , textColor: "#ffffff" } ) );
        this.ui.add( new Sparrow.UI.Label( "Mouse Wheel: Zoom Camera" , { verticalPosition: "bottom" , x: 5 , y: 22 , width: 300 , height: 20 , textSize: 16 , textColor: "#ffffff" } ) );
        this.ui.add( new Sparrow.UI.Label( "M: toggle Music" , { verticalPosition: "bottom" , x: 5 , y: 2 , height: 20 , textSize: 16 , textColor: "#ffffff" } ) );

        this.update();
        this.updateGameTime();
    }

    updateGameTime()
    {
        var time = parseInt( game.gameTime );
        this.lbl_gameTime.setStr( time+"s" );
        setTimeout( () => { this.updateGameTime(); } , 1000 );
    }

    update()
    {
        var money = parseInt( game.money );
        this.lbl_money.setStr( "Money: "+money );
        this.lbl_population.setStr( "Population: "+game.population );
        this.lbl_homeless.setStr( "Homeless: "+game.homeless );

        // water
        var waterPercent = game.water/game.waterStorage;
        if ( waterPercent < 0.2 ) this.lbl_water.setTextColor( "#cc0000" );
        else this.lbl_water.setTextColor( "#000000" );
        waterPercent = Math.round( waterPercent*100 )+"%";
        var waterChange = (game.waterProduction-game.waterConsumption);
        waterChange = Math.round( waterChange*10 )/10;
        if ( waterChange >= 0 ) waterChange = "+"+waterChange;
        // var water = Math.round( game.water*10 )/10;
        this.lbl_water.setStr( "Water: "+waterPercent+" "+waterChange );

        // food
        var foodPercent = game.food/game.foodStorage;
        if ( foodPercent < 0.2 ) this.lbl_food.setTextColor( "#cc0000" );
        else this.lbl_food.setTextColor( "#000000" );
        foodPercent = Math.round( foodPercent*100 )+"%";
        var foodChange = (game.foodProduction-game.foodConsumption);
        foodChange = Math.round( foodChange*10 )/10;
        if ( foodChange >= 0 ) foodChange = "+"+foodChange;
        // var food = Math.round( game.food*10 )/10;
        this.lbl_food.setStr( "Food: "+foodPercent+" "+foodChange );

        var crime = game.crime/game.maxCrime;
        crime = Math.round( crime*100 );
        this.lbl_crime.setStr( "Crime: "+crime+"%" );
        if ( crime > 80 ) this.lbl_crime.setTextColor( "#cc0000" );
        else this.lbl_crime.setTextColor( "#000000" );
    }

    showPopup( str )
    {
        this.lbl_popup.setStr( str );
        this.lbl_popup.b_visible = true;
        setTimeout( () => {
            this.lbl_popup.b_visible = false;
        } , 2000 );
    }
}