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

const actions = require('../actions');
const { STATS, eventClasses, getCombatText } = require('../utils');
const { ConstructAvatar } = require('./construct');
const { animationDivs } = require('../animations');
const shapes = require('./shapes');

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

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            game,
            account,
            resolution,
            activeSkill,
        } = 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,
            activeSkill,
            selectSkillTarget,
        };
    },
);

function GameConstruct(props) {
    const {
        i,
        game,
        account,
        construct,
        player,
        resolution,
        activeSkill,
        setActiveConstruct,
        selectSkillTarget,
    } = props;


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

    const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
        <div key={j} alt={STATS[s].stat}>
            {shapes[s]()}
            <div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
            <div className="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 className="skills"> {skills} </div>);

    const [combatText, combatClass] = getCombatText(construct, resolution);
    const combatTextClass = `combat-text ${combatClass}`;
    const combatTextEl = combatText
        ? <div className={combatTextClass}>{combatText}</div>
        : null;

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

    const playerTeam = game.players.find(t => t.id === account.id);
    const playerTeamIds = playerTeam.constructs.map(c => c.id);

    const anim = (
        <div className="anim-container">
            {animationDivs(combatClass)}
        </div>
    );

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

module.exports = addState(GameConstruct);