const Phaser = require('phaser');

const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants');
const addButton = require('./statsheet.button');

const TEXT_MARGIN = STATS.textMargin();
const X_ORIG_KNOWN = STATS.knownX();
const X_ORIG_LEARN = STATS.learnableX();
const Y_ORIG = STATS.y();

const menuOrigX = STATS.width() * 0.6;
const menuOrigY = STATS.height() * 0.3;
const menuHeight = STATS.height() * 0.1;
const menuPad = STATS.height() * 0.01;
const menuWidth = STATS.width() * 0.25;


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

    create(cryp) {
        this.cryp = cryp;
        this.forget = false;
        // Destroy the old registry event if it exists
        this.registry.events.on('changedata', this.updateData, this);
        this.add.text(X_ORIG_KNOWN, Y_ORIG, 'Skills', TEXT.HEADER);
        this.addKnownSkills(cryp);
        this.addControls();
    }

    addControls() {
        const infoCback = () => {
            this.forget = false;
            this.addKnownSkills(this.cryp);
            if (this.learnSkills) this.learnSkills.destroy(true);
        };
        const forgetCback = () => {
            this.forget = true;
            this.addKnownSkills(this.cryp);
        };
        const learnCback = () => {
            this.forget = false;
            this.addKnownSkills(this.cryp);
            this.addLearnableSkills(this.cryp);
        };
        addButton(this, menuOrigX, menuOrigY, infoCback, 'Skill Info');
        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad), forgetCback, 'Forget Skills');
        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, learnCback, 'Learn Skills');
    }

    addKnownSkills(cryp) {
        if (this.knownSkills) this.knownSkills.destroy(true);
        this.knownSkills = this.add.group();
        const knownSkill = (skill, i) => {
            const SKILL_X = X_ORIG_KNOWN;
            const SKILL_Y = (i * TEXT_MARGIN) + Y_ORIG + TEXT_MARGIN;

            const color = this.forget ? '#ff0000' : '#ffffff';
            const style = { fontFamily: 'monospace', fontSize: 16, color };
            this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, style)
                .setInteractive()
                .on('pointerdown', () => {
                    if (this.forget) {
                        this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
                    }
                }));
        };
        cryp.skills.forEach(knownSkill);
    }

    addLearnableSkills(cryp) {
        if (this.learnSkills) this.learnSkills.destroy(true);
        this.learnSkills = this.add.group();
        const learnable = (skill, i) => {
            const SKILL_X = X_ORIG_LEARN;
            const SKILL_Y = Y_ORIG + (i * STATS.learnableMargin() * 3) + TEXT_MARGIN;

            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, [skill.name, skill.description], TEXT.LEARNABLE)
                .setInteractive()
                .on('pointerdown', () => {
                    this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
                }));
        };

        this.learnSkills.add(this.add.text(X_ORIG_LEARN, Y_ORIG, 'Learnable', TEXT.HEADER));
        SKILLS.LEARNABLE.forEach(learnable);
    }

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

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

module.exports = Skills;