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();
const TEXT_MARGIN = 24;

const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.2;

const X_MARGIN = WIDTH * 1 / 4;

function addButton(scene, x, y, cback, name) {
    const button = scene.add
        .rectangle(x, y, menuWidth, menuHeight, 0x222222)
        .setInteractive()
        .setOrigin(0)
        .on('pointerdown', cback);
    scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
        .setOrigin(0.5, 0.5);
}

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

    create(cryp) {
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
        this.registry.events.on('changedata', this.updateData, this);
        this.cryp = cryp;
        this.forget = false;
        this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
        this.addSpecs(cryp);
        addButton(this, menuX, menuY, () => this.registry.set('crypStats', cryp), 'Stats');
    }

    updateData(parent, key, data) {
        if (key === 'cryps') {
            const cryp = data.find(c => c.id === this.cryp.id);
            this.addSpecs(cryp);
            if (this.hoverText) this.hoverText.destroy();
        }
    }

    addSpecs(cryp) {
        if (this.specs) this.specs.destroy(true);
        this.specs = this.add.group();
        const listSpecs = (list, specInfo, i) => {
            const SPEC_X = X_MARGIN * list;
            const SPEC_Y = (i + 1) * TEXT_MARGIN;

            this.specs.add(this.add.text(SPEC_X, SPEC_Y, specInfo.spec, TEXT.NORMAL)
                .setInteractive()
                .on('pointerdown', () => {
                    this.registry.get('ws').sendSpecForget(cryp.id, specInfo);
                })
                .on('pointerover', (pointer) => {
                    if (!this.forget) {
                        this.displayText(SPEC_X, SPEC_Y, `Affects ${specInfo.affects} - level ${specInfo.level}`, pointer);
                    }
                })
                .on('pointerout', () => {
                    if (this.hoverText) this.hoverText.destroy();
                }));
        };

        this.specs.add(this.add.text(X_MARGIN, 0, 'Common', TEXT.HEADER));
        cryp.specs.common.forEach((specInfo, i) => listSpecs(1, specInfo, i));

        this.specs.add(this.add.text(X_MARGIN * 2, 0, 'Uncommon', TEXT.HEADER));
        cryp.specs.uncommon.forEach((specInfo, i) => listSpecs(2, specInfo, i));

        this.specs.add(this.add.text(X_MARGIN * 3, 0, 'Rare', TEXT.HEADER));
        cryp.specs.rare.forEach((specInfo, i) => listSpecs(3, specInfo, i));
    }

    displayText(x, y, description, pointer) {
        if (this.hoverText) this.hoverText.destroy();
        this.hoverText = this.add.text(x, y, description, {
            fontSize: '16px',
            fontFamily: 'Jura',
            color: '#ffffff',
            backgroundColor: '#222222',
        }).setPadding(32);
        this.hoverText.setAlpha(0.8);
        this.hoverText.setOrigin(pointer.x >= WIDTH * 0.65 ? 0 : 1,
            pointer.y >= HEIGHT * 0.25 ? 1 : 0);
        this.hoverText.setWordWrapWidth(450);
    }


    cleanUp() {
        this.registry.events.off('changedata', this.updateData, this);
        this.scene.remove();
    }
}

module.exports = StatSheet;