import PlayScene from "../scenes/PlayScene";

export class PlayButton extends Phaser.GameObjects.Container {
    scene: PlayScene;
    playButton: Phaser.GameObjects.Image;
    shadow: Phaser.GameObjects.Image;

    constructor(scene: PlayScene) {
        super(scene, scene.scale.width / 2, scene.scale.height / 4);
        this.scene = scene;

        this.playButton = this.scene.add.image(0, 0, "play").setInteractive();
        this.shadow = this.scene.add.image(0, 0, "play").setTint(0x000000).setAlpha(0.5);

        this.init();
        this.scene.add.existing(this);
    }

    init() {
        const scaleFactor = this.scene.mountain?.scaleFactors.height || 1;
        const width = 185;
        const height = 185;

        this.playButton.setPosition(0, 0);
        this.playButton.setVisible(false);
        this.playButton.setDisplaySize(width * scaleFactor, height * scaleFactor);

        this.shadow.setPosition(this.playButton.x + 5, this.playButton.y + 5);
        this.shadow.setVisible(false);
        this.shadow.setDisplaySize(width * scaleFactor, height * scaleFactor);

        this.add([this.shadow, this.playButton])
            .setAlpha(1)
            .setDepth(3);

        // Handle resizing
        this.scene.scale.once('resize', this.scaleToFit, this);
        this.scene.scale.once('resize', this.positionOnMountain, this);

        this.scene.tweens.add({
            targets: this,
            scaleX: 1.2,
            scaleY: 1.2,
            duration: 1300,
            yoyo: true,
            ease: 'Power1',
            repeat: -1
        });
    }

    positionOnMountain() {
        this.setY(this.scene.scale.height / 2);
        this.setX(this.scene.scale.width / 2);
        this.playButton.setVisible(true);
        this.shadow.setVisible(true);
    }

    scaleToFit() {
        // Use the scale factor from the Sky class to maintain consistency
        const scaleFactor = this.scene.mountain?.scaleFactors.height || 1;
        const height = this.height * scaleFactor;
        // // Apply the scale factor to the player
        this.setDisplaySize(this.width, height);
    }

    positionOnMountainStopButton() {
        // Calculate the target positions based on your scaling factors.
        const targetX = this.scene.scale.width - 200 * (this.scene.mountain?.scaleFactors.width || 1);
        const targetY = this.scene.scale.height - 200 * (this.scene.mountain?.scaleFactors.height || 1);
    
        // Create a tween to animate the movement from the current position to the target position.
        this.scene.tweens.add({
            targets: this,     // 'this' should be your game object (the button)
            x: targetX,        // animate to targetX
            y: targetY,        // animate to targetY
            ease: 'Cubic.easeOut', // you can choose any easing function that suits your animation style
            duration: 600,     // duration in milliseconds
            // Optional callbacks:
            onStart: () => {
                // code to execute at the start of the tween
            },
            onComplete: () => {
                this.playButton.setTexture("stop");
                this.scaleToFit();
            }
        });
    }
    onGameStart() {
        // when the game starts, the play button goes to the bottom right corner and becomes 'stop' 
        this.playButton.setInteractive();
        this.positionOnMountainStopButton();
    }

    onGameOver() {
        // when the game is over (player died), the play button goes to the middle of the screen and becomes 'play'
        this.playButton.setTexture("play");
        this.playButton.setInteractive();
        this.playButton.setAlpha(1);
        this.positionOnMountain();
    }

    onFlagsCollected() {
        // when the flags are collected, the play button goes to the middle of the screen and becomes 'play'
        this.playButton.setTexture("play");
        this.playButton.setInteractive();
        this.playButton.setAlpha(1);
        this.scaleToFit();
        this.positionOnMountain();
    }
}
