const Phaser = require('phaser');
const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('.././constants');

const CRYP_MARGIN = COMBAT.crypMargin();
const TEXT_MARGIN = COMBAT.textMargin();

const statBarDimensions = (team, iter, margin) => {
    const statBarWidth = COMBAT.width() * 0.07;
    const statBarHeight = TEXT_MARGIN / 1.5;
    const statBarX = (COMBAT.width() - statBarWidth) * team;
    const statBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
    return { statBarX, statBarY, statBarWidth, statBarHeight };
};

const statTextCoord = (team, iter, margin) => {
    const statTextX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
    const statTextY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
    return { statTextX, statTextY };
};


class StatBar extends Phaser.GameObjects.Graphics {
    constructor(scene, cryp, type) {
        super(scene);
        this.crypObj = cryp;
        this.type = type;

        if (type === 'HP') {
            this.val = this.crypObj.cryp.hp.value;
            this.max = this.crypObj.cryp.hp.max;
            this.margin = 0;
        } else if (type === 'Red Shield') {
            this.val = this.crypObj.cryp.red_shield.value;
            this.max = this.crypObj.cryp.red_shield.max;
            this.margin = 1;
        } else if (type === 'Blue Shield') {
            this.val = this.crypObj.cryp.blue_shield.value;
            this.max = this.crypObj.cryp.blue_shield.max;
            this.margin = 2;
        } else if (type === 'Evasion') {
            this.val = this.crypObj.cryp.evasion.value;
            this.max = this.crypObj.cryp.evasion.max;
            this.margin = 3;
        }
        const { statTextX, statTextY } = statTextCoord(cryp.team, cryp.iter, this.margin);
        this.statText = scene.add.text(statTextX, statTextY, '', TEXT.NORMAL).setOrigin(cryp.team, 0);
        this.drawStatBar();
    }

    drawStatBar() {
        this.clear();
        const {
            statBarX, statBarY, statBarWidth, statBarHeight,
        } = statBarDimensions(this.crypObj.team, this.crypObj.iter, this.margin);
        this.statText.text = `${this.val.toString()} / ${this.max.toString()} ${this.type}`;
        // Draw Black Border
        this.fillStyle(COLOURS.BLACK);
        this.fillRect(statBarX, statBarY, statBarWidth, statBarHeight);
        // White fill
        this.fillStyle(COLOURS.WHITE);
        this.fillRect(statBarX + 2, statBarY + 2, statBarWidth - 4, statBarHeight - 4);
        // Fill the health bar
        const statPercentage = this.val / this.max;
        if (statPercentage < 0.3) {
            this.fillStyle(COLOURS.RED);
        } else if (statPercentage < 0.65) {
            this.fillStyle(COLOURS.YELLOW);
        } else {
            this.fillStyle(0x00ff00); // str8 up green
        }
        const statWidth = statBarWidth * statPercentage;
        this.fillRect(statBarX + 2, statBarY + 2, statWidth, statBarHeight - 4);
    }

    takeDamage(value) {
        if (value > 0) {
            this.val = (value >= this.val) ? 0 : this.val -= value;
        } else {
            this.val = (this.val - value > this.max) ? this.max : this.val -= value;
        }
        if (this.val === 0 && this.type === 'HP') this.crypObj.setKo();
        this.drawStatBar();
    }
}

module.exports = StatBar;
