import { EventBus } from "../EventBus";
import PlayScene from "../scenes/PlayScene";

export class PlayButton extends Phaser.GameObjects.Container {
    scene: PlayScene;
    playButton: Phaser.GameObjects.Image;
    shadow: Phaser.GameObjects.Image;
    pulseTween: Phaser.Tweens.Tween | undefined;

    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");
        this.shadow = this.scene.add.image(0, 0, "play").setTint(0x000000).setAlpha(0.5);

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

        EventBus.on('tutorial-finished', this._setInteractive, this);
        this.once(Phaser.GameObjects.Events.DESTROY, this.cleanup, this);
        this._setInteractive();
        this.positionOnSky();
        this.hide();
    }

    _setInteractive() {
        if (!this.playButton?.scene) return;
        this.playButton.setInteractive({ useHandCursor: true });
    }

    init() {
        const scaleFactor = this.scene.sky?.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.on('resize', this.scaleToFit, this);
        this.scene.scale.on('resize', this.positionOnSky, this);

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

    positionOnSky() {
        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.sky?.scaleFactors.height || 1;
        const height = this.height * scaleFactor;
        // // Apply the scale factor to the player
        this.setDisplaySize(this.width, height);
    }

    cleanup() {
        EventBus.off('tutorial-finished', this._setInteractive, this);
        this.scene?.scale.off('resize', this.scaleToFit, this);
        this.scene?.scale.off('resize', this.positionOnSky, this);
        this.scene?.tweens.killTweensOf(this);
    }

    show() {
        this.setAlpha(1).setVisible(true).setActive(true);
        this.playButton.setInteractive({ useHandCursor: true });
        this.pulseTween?.resume();
    }

    hide() {
        this.setAlpha(0).setVisible(false).setActive(false);
        this.playButton.disableInteractive();
        this.pulseTween?.pause();
    }
}
