const Phaser = require('phaser');

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

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

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

    create(zoneId) {
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);

        const menu = this.add
            .rectangle(Math.floor(WIDTH * 0.7), Math.floor(HEIGHT * 0.8), Math.floor(WIDTH * 0.2), Math.floor(HEIGHT * 0.2), 0x888888)
            .setInteractive()
            .setOrigin(0);

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

        menu.on('pointerdown', () => {
            this.registry.get('ws').sendZoneClose(zoneId);
            this.scene.get('Zones').cleanUp();
        });


        return true;
    }

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

module.exports = ZoneControls;