class Shop
{
    constructor( ui , map )
    {
        this.ui = ui;
        this.map = map;
        this.lbl_bg = this.ui.add( new Sparrow.UI.Label( "" , { position: "center" , verticalPosition: "center" , width: 500 , height: 400 , background: "background" , backgroundColor: "#d6e6ff" , borderWidth: 5 , borderColor: "#003844" } ) );
        this.lbl_bg.addChild( new Sparrow.UI.Label( "Shop" , { position: "center" , y: 10 , textAlign: "center" , font: "monospace" , textSize: 30 } ) );

        this.lbl_crystals = this.lbl_bg.addChild( new Sparrow.UI.Label( "Crystals: " , { position: "center" , width: 200 , y: 60 , textAlign: "center" , font: "monospace" } ) );

        var buttonColor = "#003844";
        var buttonHoverColor = "#00647a";
        this.btn_1 = this.lbl_bg.addChild( new Sparrow.UI.Button( "Shop Item 1" , { position: "center" , width: 400 , height: 40 , y: 100 , font: "monospace" , backgroundColor: buttonColor , textColor: "#ffffff" , hover: { backgroundColor: buttonHoverColor } } ) );
        this.btn_1.onclick = () => {
            var nextSpeedRank = this.map.car.stats.speedRank+1;
            if ( nextSpeedRank < CarStats.SpeedUpgrades.length )
            {
                if ( this.map.numberOfCrystals >= CarStats.SpeedUpgrades[nextSpeedRank].cost )
                {
                    this.map.car.upgradeSpeed();
                    this.upgradeSound.play();
                    this.map.pay( CarStats.SpeedUpgrades[nextSpeedRank].cost );
                    this.lbl_crystals.setStr( "Crystals: "+this.map.numberOfCrystals );
                    this.updateSpeedButton();
                }
                else
                {
                    this.errorSound.play();
                }
            }
        };
        this.btn_2 = this.lbl_bg.addChild( new Sparrow.UI.Button( "Shop Item 2" , { position: "center" , width: 400 , height: 40 , y: 150 , font: "monospace" , backgroundColor: buttonColor , textColor: "#ffffff" , hover: { backgroundColor: buttonHoverColor } } ) );
        this.btn_2.onclick = () => {
            var nextAccelerationRank = this.map.car.stats.accelerationRank+1;
            if ( nextAccelerationRank < CarStats.AccelerationUpgrades.length )
            {
                if ( this.map.numberOfCrystals >= CarStats.AccelerationUpgrades[nextAccelerationRank].cost )
                {
                    this.map.car.upgradeAcceleration();
                    this.upgradeSound.play();
                    this.map.pay( CarStats.AccelerationUpgrades[nextAccelerationRank].cost );
                    this.lbl_crystals.setStr( "Crystals: "+this.map.numberOfCrystals );
                    this.updateAccelerationButton();
                }
                else
                {
                    this.errorSound.play();
                }
            }
        };
        this.btn_3 = this.lbl_bg.addChild( new Sparrow.UI.Button( "Shop Item 3" , { position: "center" , width: 400 , height: 40 , y: 200 , font: "monospace" , backgroundColor: buttonColor , textColor: "#ffffff" , hover: { backgroundColor: buttonHoverColor } } ) );
        this.btn_3.onclick = () => {
            var nextRangeRank = this.map.car.stats.rangeRank+1;
            if ( nextRangeRank < CarStats.RangeUpgrades.length )
            {
                if ( this.map.numberOfCrystals >= CarStats.RangeUpgrades[nextRangeRank].cost )
                {
                    this.map.car.upgradeRange();
                    this.upgradeSound.play();
                    this.map.pay( CarStats.RangeUpgrades[nextRangeRank].cost );
                    this.lbl_crystals.setStr( "Crystals: "+this.map.numberOfCrystals );
                    this.updateRangeButton();
                }
                else
                {
                    this.errorSound.play();
                }
            }
        };
        this.btn_4 = this.lbl_bg.addChild( new Sparrow.UI.Button( "Shop Item 4" , { position: "center" , width: 400 , height: 40 , y: 250 , font: "monospace" , backgroundColor: buttonColor , textColor: "#ffffff" , hover: { backgroundColor: buttonHoverColor } } ) );
        this.btn_4.onclick = () => {
            var nextCapacityRank = this.map.car.stats.capacityRank+1;
            if ( nextCapacityRank < CarStats.CapacityUpgrades.length )
            {
                if ( this.map.numberOfCrystals >= CarStats.CapacityUpgrades[nextCapacityRank].cost )
                {
                    this.map.car.upgradeCapacity();
                    this.upgradeSound.play();
                    this.map.pay( CarStats.CapacityUpgrades[nextCapacityRank].cost );
                    this.lbl_crystals.setStr( "Crystals: "+this.map.numberOfCrystals );
                    this.updateCapacityButton();
                }
                else
                {
                    this.errorSound.play();
                }
            }
        };

        // launch button
        this.btn_launch = this.lbl_bg.addChild( new Sparrow.UI.Button( "Escape ["+Map.LAUNCH_COST+"◆]" , { position: "center" , width: 400 , height: 40 , y: 300 , font: "monospace" , backgroundColor: "#cc0000" , textColor: "#ffffff" , hover: { backgroundColor: "#dd0000" } } ) );
        this.btn_launch.onclick = () => {
            if ( this.map.numberOfCrystals >= Map.LAUNCH_COST )
            {
                this.map.launchRocket();
                this.upgradeSound.play();
                this.map.pay( Map.LAUNCH_COST );
                this.lbl_crystals.setStr( "Crystals: "+this.map.numberOfCrystals );
                this.updateCapacityButton();
                this.lbl_bg.b_visible = false;
            }
            else
            {
                this.errorSound.play();
            }
        };

        this.btn_close = this.lbl_bg.addChild( new Sparrow.UI.Button( "Done" , { position: "center" , width: 200 , y: 350 , font: "monospace" } ) );
        this.btn_close.onclick = () => {
            this.lbl_bg.b_visible = false;
        };
        this.btn_close_x = this.lbl_bg.addChild( new Sparrow.UI.Button( "X" , { position: "right" , width: 30 , x: 10 , y: 10 , font: "monospace" , textAlign: "center" } ) );
        this.btn_close_x.onclick = () => {
            this.lbl_bg.b_visible = false;
        };

        this.lbl_bg.b_visible = false;

        this.upgradeSound = new Audio( "sounds/shop.wav" );
        this.errorSound = new Audio( "sounds/error.wav" );
    }

    show()
    {
        this.lbl_crystals.setStr( "◆ Crystals: "+this.map.numberOfCrystals );

        this.updateSpeedButton();
        this.updateAccelerationButton();
        this.updateRangeButton();
        this.updateCapacityButton();

        this.lbl_bg.b_visible = true;
    }

    updateSpeedButton()
    {
        var nextSpeedRank = this.map.car.stats.speedRank+1;
        if ( nextSpeedRank < CarStats.SpeedUpgrades.length )
        {
            this.btn_1.setStr( "+"+CarStats.SpeedUpgrades[nextSpeedRank].value+" Speed ["+CarStats.SpeedUpgrades[nextSpeedRank].cost+"◆]" );
        }
        else
        {
            this.btn_1.setStr( "Max Speed Upgrades" );
        }
    }

    updateAccelerationButton()
    {
        var nextAccelerationRank = this.map.car.stats.accelerationRank+1;
        if ( nextAccelerationRank < CarStats.AccelerationUpgrades.length )
        {
            this.btn_2.setStr( "+"+CarStats.AccelerationUpgrades[nextAccelerationRank].value+" Acceleration ["+CarStats.AccelerationUpgrades[nextAccelerationRank].cost+"◆]" );
        }
        else
        {
            this.btn_2.setStr( "Max Acceleration Upgrades" );
        }
    }

    updateRangeButton()
    {
        var nextRangeRank = this.map.car.stats.rangeRank+1;
        if ( nextRangeRank < CarStats.RangeUpgrades.length )
        {
            this.btn_3.setStr( "+"+CarStats.RangeUpgrades[nextRangeRank].value+" Range ["+CarStats.RangeUpgrades[nextRangeRank].cost+"◆]" );
        }
        else
        {
            this.btn_3.setStr( "Max Range Upgrades" );
        }
    }

    updateCapacityButton()
    {
        var nextCapacityRank = this.map.car.stats.capacityRank+1;
        if ( nextCapacityRank < CarStats.CapacityUpgrades.length )
        {
            this.btn_4.setStr( "+"+CarStats.CapacityUpgrades[nextCapacityRank].value+" Capacity ["+CarStats.CapacityUpgrades[nextCapacityRank].cost+"◆]" );
        }
        else
        {
            this.btn_4.setStr( "Max Capacity Upgrades" );
        }
    }
}