const Phaser = require('phaser');

const { TEXT, POSITIONS: { NAVIGATION } } = require('./constants');

const X = NAVIGATION.x();
const Y = NAVIGATION.y();
const WIDTH = NAVIGATION.width();
const HEIGHT = NAVIGATION.height();

const BTN_WIDTH = Math.floor(WIDTH / 4);
const BTN_HEIGHT = Math.floor(HEIGHT / 2);

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

    create() {
        const ws = this.registry.get('ws');
        const player = this.registry.get('player');
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);

        const ready = this.add
            .rectangle(BTN_WIDTH * 3, 0, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);
        this.add
            .text(ready.getCenter().x, ready.getCenter().y, 'Ready', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        ready.on('pointerdown', () => {
            ws.sendInstanceReady(player.instance);
        });

        const menu = this.add
            .rectangle(BTN_WIDTH * 3, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x440000)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => this.registry.set('home', true));

        this.add
            .text(menu.getCenter().x, menu.getCenter().y, 'Menu', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
    }

    cleanUp() {
        this.scene.remove();
    }
}

module.exports = MenuNavigation;
