const { connect } = require('preact-redux');
const { Component } = require('preact');
const preact = require('preact');
const range = require('lodash/range');

const { STATS } = require('../utils');
const { ConstructAvatar, ConstructText } = require('./construct');
const { ConstructAnimation } = require('./animations');
const shapes = require('./shapes');

const SkillBtn = require('./skill.btn');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            game,
            account,
            activeSkill,
            animFocus,
            animating,
            animText,
        } = state;

        function selectSkillTarget(targetConstructId) {
            if (activeSkill) {
                return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
            }
            return false;
        }

        // intercept self casting skills
        if (activeSkill && activeSkill.skill.self_targeting) {
            ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
        }
        return {
            game,
            account,
            animating,
            animFocus,
            animText,
            activeSkill,
            selectSkillTarget,
        };
    }
);

const eventClasses = (animating, animFocus, construct, postSkill) => {
    if (!animating) return '';
    if (!postSkill) {
        if (animFocus.includes(construct.id)) return '';
        return 'unfocus';
    }
    if (postSkill.constructId !== construct.id) {
        if (animFocus.includes(construct.id)) return '';
        return 'unfocus';
    }
    if (postSkill.effects) construct.effects = postSkill.effects;
    construct.green_life.value = postSkill.life.green;
    construct.red_life.value = postSkill.life.red;
    construct.blue_life.value = postSkill.life.blue;
    return postSkill.css;
};

class GameConstruct extends Component {
    constructor() {
        super();
        this.resolvedLength = 0;
    }

    render() {
        const {
            i,
            animating,
            construct,
            player,
            activeSkill,
            selectSkillTarget,
            animFocus,
            animText,
        } = this.props;

        const ko = construct.green_life.value === 0 ? 'ko' : '';
        const classes = eventClasses(animating, animFocus, construct, animText);

        const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
            <div key={j} alt={STATS[s].stat}>
                {shapes[s]()}
                <div class="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
                <div class="value" >{construct[STATS[s].stat].value}</div>
            </div>
        ));

        const skills = range(0, 3)
            .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} animating={animating} />);

        let crypSkills = <div> &nbsp; </div>;
        if (player && !animating) crypSkills = (<div class="skills"> {skills} </div>);

        const effects = construct.effects.length
            ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
            : <div>&nbsp;</div>;

        return (
            <div
                onClick={() => selectSkillTarget(construct.id)}
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                class={`game-construct ${ko} ${classes}`} >
                <h3 class="name"> {construct.name} </h3>
                {crypSkills}
                <div class="stats"> {stats} </div>
                <ConstructAvatar construct={construct} />
                <ConstructAnimation construct={construct} />
                <ConstructText construct={construct} />
                <div class="effects"> {effects} </div>
            </div>
        );
    }
}

module.exports = addState(GameConstruct);