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

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

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

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

    render() {
        const { construct, resolution } = 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 (resolution) {
            const { red, blue, green } = resolution.event[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);