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,
            resolution,
            activeSkill,
            activeConstruct,
        } = 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,
            activeConstruct,
            selectSkillTarget,
        };
    },

    function receiveDispatch(dispatch) {
        function setActiveSkill(constructId, skill) {
            dispatch(actions.setActiveSkill(constructId, skill));
            // particlesJS(`particles-${constructId}`, config);
        }

        function setActiveConstruct(construct) {
            dispatch(actions.setActiveConstruct(construct));
        }

        return { setActiveSkill, setActiveConstruct };
    }

);

function Game(props) {
    const {
        game,
        account,
        resolution,
        setActiveSkill,
        setActiveConstruct,
    } = 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 className="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 className="team opponent">
                {constructs}
            </div>
        );
    }

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

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

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

module.exports = addState(Game);