export class MenuScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MenuScene' });
    }

    preload() {
        this.load.image('background', 'assets/menu-background.png');
        this.load.image('logo', 'assets/menu-logo.png');
        this.load.image('fathawk-fly-1', 'assets/menu-fathawk-fly-1.png');
        this.load.image('fathawk-land', 'assets/menu-fathawk-land.png');
        this.load.image('sheriff', 'assets/menu-sheriff-emily.png');
        this.load.image('NNBoy', 'assets/menu-99-boy.png');
        this.load.image('QBoy', 'assets/menu-quantum-boy.png');
        this.load.image('ProTec', 'assets/menu-cult-of-protec.png');
        this.load.audio('menu-music', 'assets/music/gulch-2.mp3');
        this.load.audio('hawk-call', 'assets/sounds/hawk-call.mp3')
    }

    create() {
        // Add background image
        const background = this.add.image(0, 0, 'background').setOrigin(0, 0);
        background.scaleX = this.scale.width / background.width;
        background.scaleY = this.scale.height / background.height;
        background.setScrollFactor(0);

        // Add logo with initial scale of zero
        const logo = this.add.image(
            this.scale.width / 2,
            this.scale.height / 2.4,
            'logo'
        ).setOrigin(0.5).setScale(0);

        const fathawkFly = this.add.image(
            this.scale.width * 1.1,
            this.scale.height / 8.5,
            'fathawk-fly-1'
        ).setScale(0.1);

        const sheriff = this.add.image(
            this.scale.width / 6.5,
            this.scale.height * 1.3,
            'sheriff'
        ).setScale(0.4);

        const ProTec = this.add.image(
            this.scale.width * .65,
            this.scale.height * 1.3,
            'ProTec'
        ).setScale(0.4);

        const NNBoy = this.add.image(
            this.scale.width * .75,
            this.scale.height * 1.3,
            'NNBoy'
        ).setScale(0.4);

        const QBoy = this.add.image(
            this.scale.width * .9,
            this.scale.height * 1.3,
            'QBoy'
        ).setScale(0.4);

        // Background Music
        this.bgMusic = this.sound.add('menu-music', { volume: 0.5 });
        this.bgMusic.loop = true;
        this.bgMusic.play();

        // Animate the logo to grow and spin, then return to original scale
        this.tweens.add({
            targets: logo,
            scale: 1.2,
            delay: 500,
            duration: 2000,
            ease: 'Power2',
            onComplete: () => {
                this.tweens.add({
                    targets: logo,
                    scale: 1.0, // Return to original size
                    angle: 0,   // Reset the rotation
                    duration: 1000,
                    ease: 'Power2',
                    onComplete: () => {
                        
                    }
                });
                this.sound.play('hawk-call');
                this.tweens.add({
                    targets: fathawkFly,
                    scale: .2,
                    x: this.scale.width / 3.5 ,
                    y: this.scale.height * .9,
                    duration: 2000,
                    ease: 'Power1',
                    onComplete: () => {
                        fathawkFly.setTexture('fathawk-land');
                        this.tweens.add({
                            targets: sheriff,
                            y: this.scale.height * .85,
                            duration: 1000,
                            ease: 'Power1',
                            onComplete: () => {
                                this.tweens.add({
                                    targets: ProTec,
                                    y: this.scale.height * .9,
                                    duration: 1000,
                                    delay: 0,
                                    ease: 'Power1',
                                });
                                this.tweens.add({
                                    targets: NNBoy,
                                    y: this.scale.height * .85,
                                    duration: 1000,
                                    delay: 500,
                                    ease: 'Power1',
                                });
                                this.tweens.add({
                                    targets: QBoy,
                                    y: this.scale.height * .78,
                                    duration: 1000,
                                    delay: 1000,
                                    ease: 'Power1',
                                });
                            }
                        });
                    }
                });
            }
        });      

        this.add.text(
            this.scale.width / 2,
            this.scale.height * (9 / 10),
            'Press SPACE to start', 
            { fontSize: '32px', fill: '#fff' }
        ).setOrigin(0.5);

        this.input.keyboard.on('keydown-SPACE', () => {
            this.bgMusic.stop();
            this.scene.start('Gulch');
        });
    }
}