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 / 6);
const BTN_HEIGHT = Math.floor(HEIGHT / 3);

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

    create() {
        const ranks = this.add
            .rectangle(X, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);
        this.add
            .text(ranks.getCenter().x, ranks.getCenter().y, 'Rankings', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        ranks.on('pointerdown', () => this.registry.set('homeRankings', true));

        const news = this.add
            .rectangle(X + BTN_WIDTH * 1.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);
        this.add
            .text(news.getCenter().x, news.getCenter().y, 'News', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        news.on('pointerdown', () => this.registry.set('homeNews', true));

        const shop = this.add
            .rectangle(X + BTN_WIDTH * 3, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);
        this.add
            .text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        shop.on('pointerdown', () => this.registry.set('homeShop', true));
    }

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

module.exports = HomeNavigation;