import { Container, Assets, Sprite, Text } from 'pixi';

export default class GameHeader extends Container
{
    constructor()
    {
        super({
            isRenderGroup: true
        });
    }

    async init()
    {
        // State label
        this.stateLabel = new Text({
            text: '',
            style: {
                fill: '#ffffff',
                fontSize: 24,
                fontFamily: 'EraserDust',
            },
        });

        this.addChild(this.stateLabel);

        // Restart button
        const texture1 = await Assets.load('assets/images/game/restart-button.png');
        this.restartButton = new Sprite(texture1);
        this.addChild(this.restartButton);
        this.restartButton.visible = false;

        this.restartButton.scale = .5;
        this.restartButton.interactive = true;
        this.restartButton.buttonMode = true;
        this.restartButton.cursor = 'pointer';

        // Add event listeners
        // Note that pointerdown event listener is added by parent container
        this.restartButton.on('pointerover', () => {
            this.restartButton.alpha = 0.8;
        });

        this.restartButton.on('pointerout', () => {
            this.restartButton.alpha = 1;
        });

        // Join button
        const texture2 = await Assets.load('assets/images/game/join-button.png');
        this.joinButton = new Sprite(texture2);
        this.addChild(this.joinButton);
        this.joinButton.visible = false;

        this.joinButton.scale = .5;
        this.joinButton.interactive = true;
        this.joinButton.buttonMode = true;
        this.joinButton.cursor = 'pointer';

        // Add event listeners
        // Note that pointerdown event listener is added by parent container
        this.joinButton.on('pointerover', () => {
            this.joinButton.alpha = 0.8;
        });

        this.joinButton.on('pointerout', () => {
            this.joinButton.alpha = 1;
        });
    }

    setStateText(message, showRestart = false, showJoin = false, color = '#ffffff')
    {
        this.stateLabel.text = message;
        this.stateLabel.style.fill = color;

        this.restartButton.visible = showRestart;
        this.joinButton.visible = showJoin;

        // Reposition buttons
        this.restartButton.x = this.stateLabel.width + 10;
        this.restartButton.y = this.stateLabel.y - (this.restartButton.height - this.stateLabel.height) / 2;

        this.joinButton.x = this.stateLabel.width + 10;
        this.joinButton.y = this.stateLabel.y - (this.joinButton.height - this.stateLabel.height) / 2;
    }

    getRestartButton()
    {
        return this.restartButton;
    }

    getJoinButton()
    {
        return this.joinButton;
    }
}
