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

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

const GameConstruct = require('./game.construct');
const Targeting = require('./targeting.arrows');

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

    function receiveDispatch(dispatch) {
        function setActiveSkill(constructId, skill) {
            dispatch(actions.setActiveSkill(constructId, skill));
        }

        return { setActiveSkill };
    }

);

function Game(props) {
    const {
        game,
        account,
        animating,
        setActiveSkill,
    } = props;

    if (!game) return <div>...</div>;

    const otherTeams = game.players.filter(t => t.id !== account.id);
    const playerTeam = game.players.find(t => t.id === account.id);

    function PlayerTeam(team) {
        const constructs = team.constructs.map((c, i) =>
            <GameConstruct key={c.id} i={i} construct={c} player={true} />);
        return (
            <div class="team player">
                {constructs}
            </div>
        );
    }

    function OpponentTeam(team) {
        const constructs = team.constructs.map((c, i) =>
            <GameConstruct key={c.id} i={i} construct={c} player={false} />);
        return (
            <div class="team opponent">
                {constructs}
            </div>
        );
    }

    const gameClasses = `game ${animating ? 'animating' : ''}`;

    function gameClick(e) {
        e.stopPropagation();
    }

    return (
        <main class={gameClasses} onClick={gameClick} >
            {otherTeams.map(OpponentTeam)}
            <Targeting />
            {PlayerTeam(playerTeam, setActiveSkill)}
        </main>
    );
}

module.exports = addState(Game);