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

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

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

    create(vbox) {
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
        this.add.text(WIDTH / 10, 0, 'free', TEXT.HEADER);
        this.add.text(WIDTH / 5, 0, 'bound', TEXT.HEADER);

        const drawFree = (item, i) => {
            this.add
                .text(WIDTH / 10, 25 * (i + 2), item, TEXT.NORMAL)
                .setInteractive()
                .on('pointerdown', () => {
                    this.registry.get('ws').sendVboxAccept(vbox.game, i);
                    console.log(item);
                });
        };

        const drawBound = (item, i) => {
            this.add
                .text(WIDTH / 5, 25 * (i + 2), item, TEXT.NORMAL)
                .setInteractive()
                .on('pointerdown', () => {
                    // this.registry.get('ws').sendVboxAccept(vbox.game, i);
                    console.log(item);
                });
        };
        vbox.free.forEach(drawFree);
        vbox.bound.forEach(drawBound);
    }

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

module.exports = Vbox;