const preact = require('preact');
const { connect } = require('preact-redux');

const shapes = require('./shapes');

const addState = connect(({ animText }) => ({ animText }));

class GameConstructLife extends preact.Component {
    shouldComponentUpdate(newProps) {
        if (newProps.animText !== this.props.animText) {
            if (newProps.animText && newProps.animText.target === this.props.construct.id) {
                const [type] = newProps.animText.variant;
                if (type === 'Damage' || type === 'Healing' || type === 'Recharge') return true;
            }
        }
        if (newProps.construct !== this.props.construct) return true;
        return false;
    }

    render() {
        const { construct, animText } = this.props;
        const lifeBars = (redLife, greenLife, blueLife) => {
            return (
                <div class="stats">
                    <div>
                        {shapes.RedLife()}
                        <div class="max" >{redLife} / {construct.red_life.max}</div>
                    </div>
                    <div>
                        {shapes.GreenLife()}
                        <div class="max" >{greenLife} / {construct.green_life.max}</div>
                    </div>
                    <div>
                        {shapes.BlueLife()}
                        <div class="max" >{blueLife} / {construct.blue_life.max}</div>
                    </div>
                </div>
            );
        };

        if (animText) {
            const { red, blue, green } = animText.variant[1].display;
            return lifeBars(red, green, blue);
        }

        return lifeBars(construct.red_life.value, construct.green_life.value, construct.blue_life.value);
    }
}

module.exports = addState(GameConstructLife);