const Phaser = require('phaser');

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

class GameList extends Phaser.GameObjects.Group {
    constructor(list, cryps) {
        super(list);
        // this.keyboard = list.input.keyboard;

        const ws = list.registry.get('ws');

        const games = [
            'PVE',
            'PVP',
        ];

        const X = GAME_LIST.x();
        const WIDTH = GAME_LIST.width();
        const HEIGHT = GAME_LIST.height();

        const pvp = list.add
            .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
            .setInteractive()
            .setOrigin(0);

        this
            .add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'NEW', TEXT.HEADER));

        const pve = list.add
            .rectangle(X, GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x004400)
            .setInteractive()
            .setOrigin(0);

        this
            .add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER));

        const refresh = list.add
            .rectangle(X + Math.floor(WIDTH / 2), GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x000044)
            .setInteractive()
            .setOrigin(0);

        this
            .add(list.add.text(refresh.getCenter().x, refresh.getCenter().y, 'REFRESH', TEXT.HEADER));


        pvp.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            list.scene.switch('Combat');
            return ws.sendGamePvp(team);
        });

        pve.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            list.scene.switch('Combat');
            return ws.sendGamePve(team);
        });

        refresh.on('pointerdown', () => {
            return ws.sendGameJoinableList();
        });


        return true;
    }

    cleanup() {
        return true;
    }
}

module.exports = GameList;