const Phaser = require('phaser');

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

class GameList extends Phaser.GameObjects.Group {
    constructor(args) {
        super(list);

        const { list, events, ws, cryps, gameList } = args;

        const X = GAME_LIST.x();
        const WIDTH = Math.floor(GAME_LIST.width() / 2);
        const HEIGHT = GAME_LIST.height();
        const TEXT_MARGIN = 24;

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

        this.add(list.add
            .text(spawn.getCenter().x, spawn.getCenter().y, 'SPAWN', TEXT.HEADER)
            .setOrigin(0.5, 0.5));

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

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

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

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

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

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


        const gameRow = (game, i) => {
            const GAME_X = GAME_LIST.x();
            const GAME_Y = GAME_LIST.rowY(i);

            const gameBox = list.add
                .rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111)
                .setInteractive()
                .setOrigin(0);

            const TITLE = game.teams[0].cryps.map(c => c.name).join(', ');

            this.add(list.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
            this.add(list.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));

            gameBox.on('pointerdown', () => {
                const team = cryps.filter(c => c.active).map(c => c.id);
                ws.sendGameJoin(game.id, team);
            });
        };

        gameList.forEach(gameRow);

        spawn.on('pointerdown', () => {
            events.emit('CRYP_SPAWN');
        });

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

        pve.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            if (team.length === 0) return false;
            return ws.sendGamePve(team);
        });

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

        return true;
    }

    cleanup() {
        return true;
    }
}

module.exports = GameList;