import { playMusic, stopMusic } from '../audio.js';

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

    preload() {
        this.load.json('gameConfig', 'config/game.json?v=2');
        this.load.audio('mainTheme', 'assets/music/00-main-theme.mp3');
        this.load.image('logo-title', 'assets/images/logo-title.png');
        this.load.image('logo-people', 'assets/images/logo-people.png');
        this.load.image('main-menu', 'assets/images/main-menu.png');
    }

    shutdown() {
        stopMusic(this);
    }

    create() {
        playMusic(this, 'mainTheme');

        const cx = 800, cy = 450;

        // Add background image
        const bg = this.add.image(cx, cy, 'main-menu').setOrigin(0.5);
        const scaleX = this.cameras.main.width / bg.width;
        const scaleY = this.cameras.main.height / bg.height;
        bg.setScale(Math.max(scaleX, scaleY));

        // Images
        const logoPeople = this.add.image(cx, 350, 'logo-people').setOrigin(0.5).setScale(.70).setAngle(-15);
        const logoTitle = this.add.image(cx, 350, 'logo-title').setOrigin(0.5).setScale(.75).setAngle(5);

        this.tweens.add({
            targets: logoPeople,
            scaleX: 0.80,
            scaleY: 0.80,
            duration: 3000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut',
        });
        this.tweens.add({
            targets: logoPeople,
            angle: 15,
            duration: 2000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut',
        });
        this.tweens.add({
            targets: logoTitle,
            angle: -5,
            duration: 5000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut',
        });
        this.tweens.add({
            targets: logoTitle,
            scaleX: 0.90,
            scaleY: 0.90,
            duration: 8000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut',
        });

        // // Game list
        // const games = [
        //     '★  COLORADO DEFENSE  (Missile Command)',
        //     '★  CODE BUG INVADERS  (Space Invaders)',
        //     '★  DOT DUDE  (Pac-Man)',
        //     '★  SMASH OUT  (Arkanoid)',
        // ];
        // games.forEach((txt, i) => {
        //     this.add.text(cx, 470 + i * 38, txt, {
        //         fontSize: '22px',
        //         fontFamily: 'monospace',
        //         color: '#ffff00',
        //     }).setOrigin(0.5);
        // });

        // Blink "Press SPACE"
        const prompt = this.add.text(cx, 730, 'PRESS SPACE OR CLICK TO START', {
            fontSize: '32px',
            fontFamily: 'monospace',
            color: '#ffffff',
        }).setOrigin(0.5);

        this.tweens.add({
            targets: prompt,
            alpha: 0,
            duration: 600,
            yoyo: true,
            repeat: -1,
        });

        this.input.keyboard.once('keydown-SPACE', () => this.startGame());
        this.input.once('pointerdown', () => this.startGame());
    }

    startGame() {
        const cfg = this.cache.json.get('gameConfig');
        this.scene.start('GameManager', { config: cfg, level: 1, lives: cfg.lives });
    }
}