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

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


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


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

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            game,
            account,
            activeSkill,
            resolution,

            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,
            resolution,
            animText,
            activeSkill,
            selectSkillTarget,
        };
    },
);


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

    render() {
        const {
            i,
            game,
            account,
            construct,
            player,
            activeSkill,
            selectSkillTarget,

            // todo remove dep
            resolution,

            animText,
        } = this.props;

        const ko = construct.green_life.value === 0 ? 'ko' : '';
        const classes = eventClasses(game, account, resolution, 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} />);

        let crypSkills = <div> &nbsp; </div>;
        if (player) 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);