const Phaser = require('phaser');
const Passives = require('./passives');
const Stats = require('./statsheet.stats');
const Skills = require('./statsheet.skills');
const { TEXT, POSITIONS: { STATS } } = require('./constants');

const menuOrig = STATS.height() * 0.5;
const menuHeight = STATS.height() * 0.1;
const menuPad = STATS.height() * 0.01;
const menuWidth = STATS.width() * 0.25;

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

    create(props) {
        const { cryp } = props;
        this.cryp = cryp;
        this.stats = new Stats(this, cryp);
        this.addControls(cryp);
    }

    addControls(cryp) {
        const menu = this.add
            .rectangle(0, menuOrig, menuWidth, menuHeight, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                // Registry events won't get auto cleaned
                this.registry.events.off('changedata', this.updateData, this);
                this.scene.run('CrypList');
                this.scene.remove('Skills');
                this.scene.remove('Passives');
                this.scene.remove();
            });

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

        const passives = this.add
            .rectangle(0, menuOrig + menuHeight + menuPad, menuWidth, menuHeight, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                if (this.passives) return false;
                this.removeSkills();
                this.addPassives(cryp);
                this.passives = true;
                return true;
            });

        this.add.text(passives.getCenter().x, passives.getCenter().y, 'View Passives', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const skills = this.add
            .rectangle(0, menuOrig + (menuHeight + menuPad) * 2, menuWidth, menuHeight, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                if (this.skills) return false;
                this.removePassives();
                this.addSkills(cryp);
                this.skills = true;
                return true;
            });
        this.add.text(skills.getCenter().x, skills.getCenter().y, 'View Skills', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const clear = this.add
            .rectangle(0, menuOrig + (menuHeight + menuPad) * 3, menuWidth, menuHeight, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                this.removePassives();
                this.removeSkills();
                return true;
            });
        this.add.text(clear.getCenter().x, clear.getCenter().y, 'View Cryp', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
    }

    addSkills(cryp) {
        this.scene.add('Skills', Skills);
        this.scene.run('Skills', cryp);
    }

    addPassives(cryp) {
        this.scene.add('Passives', Passives);
        this.scene.run('Passives', cryp);
    }

    removePassives() {
        if (!this.passives) return false;
        this.scene.remove('Passives');
        this.passives = false;
        return true;
    }

    removeSkills() {
        if (!this.skills) return false;
        this.scene.remove('Skills');
        this.skills = false;
        return true;
    }
}

module.exports = StatSheet;