const Phaser = require('phaser');

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

const TEXT_MARGIN = 24;

const KEY_MAP = [
    'keydown_ONE',
    'keydown_TWO',
    'keydown_THREE',
    'keydown_FOUR',
    'keydown_FIVE',
];

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

    create() {
        this.registry.events.on('changedata', this.updateData, this);
        this.registry.events.on('setdata', this.updateData, this);
        this.addCrypRows(this.registry.get('cryps'));
    }

    updateData(parent, key, data) {
        if (key === 'cryps') {
            KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
            this.addCrypRows(data);
        }
    }

    addCrypRows(cryps) {
        if (!cryps) return true;
        if (this.crypRows) this.crypRows.destroy(true);
        this.crypRows = this.add.group();
        const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
        const ROW_WIDTH = CRYP_LIST.rowWidth();

        cryps.forEach((cryp, i) => {
            const ROW_X = CRYP_LIST.x();
            const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();

            const ACTIVE_FILL = cryp.active
                ? 1
                : 0;

            const FILL = Object.values(COLOURS)[i];

            const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
                .setInteractive()
                .setOrigin(0)
                .on('pointerdown', () => {
                    this.scene.get('Menu').displaySkills(cryp);
                });

            row.itemSelect = () => {
                row.setFillStyle(COLOURS.SELECT);
            };

            row.itemDeselect = () => {
                row.setFillStyle(FILL, ACTIVE_FILL);
            };

            const selectFn = () => {
                this.game.events.emit('CRYP_ACTIVE', cryp);
            };

            if (KEY_MAP[i]) {
                this.input.keyboard.on(KEY_MAP[i], selectFn, this);
            }

            row.cryp = cryp;
            this.crypRows.add(row);

            const crypStat = (stat, j) => {
                const STAT_X = ROW_X;
                const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;

                this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
            };

            const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
            CRYP_STATS.forEach(crypStat);

            const selectBtn = this.add
                .rectangle(0, ROW_Y + (ROW_HEIGHT * 0.9), ROW_WIDTH, ROW_HEIGHT / 10, FILL, 0.5)
                .setInteractive()
                .setOrigin(0);

            selectBtn.on('pointerdown', selectFn);

            this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
            this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
        });
        return true;
    }

    cleanUp() {
        KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
        this.registry.events.off('changedata', this.updateData, this);
        this.registry.events.off('setdata', this.updateData, this);
        this.scene.remove();
    }
}

module.exports = MenuCrypList;