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

const actions = require('./../actions');
const { COLOURS } = require('./../utils');
const { stringSort, ConstructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');

const idSort = stringSort('id');

const addState = connect(
    function receiveState(state) {
        const { ws, constructs, team, account } = state;

        function sendConstructSpawn(name) {
            return ws.sendConstructSpawn(name);
        }

        return {
            account,
            constructs,
            team,
            sendConstructSpawn,
        };
    },

    function receiveDispatch(dispatch) {
        function setTeam(constructIds) {
            dispatch(actions.setTeam(constructIds));
        }

        function navToList() {
            dispatch(actions.setGame(null));
            dispatch(actions.setInstance(null));
            return dispatch(actions.setNav('list'));
        }


        return {
            setTeam,
            navToList,
        };
    }
);

function Team(args) {
    const {
        account,
        constructs,
        team,

        setTeam,
        sendConstructSpawn,
        navToList,
    } = args;

    if (!constructs) return <div></div>;

    // redux limitation + suggested workaround
    // so much for dumb components
    function selectConstruct(id) {
        // remove
        const i = team.findIndex(sid => sid === id);
        if (i > -1) {
            team[i] = null;
            return setTeam(team);
        }

        // window insert
        const insert = team.findIndex(j => j === null);
        if (insert === -1) return setTeam([id, null, null]);
        team[insert] = id;
        return setTeam(team);
    }

    const constructPanels = constructs.sort(idSort).map(construct => {
        const colour = team.indexOf(construct.id);
        const selected = colour > -1;

        const borderColour = selected ? COLOURS[colour] : '#000000';

        return (
            <div
                key={construct.id}
                className="menu-construct"
                style={ { 'border-color': borderColour || 'whitesmoke' } }
                onClick={() => selectConstruct(construct.id)} >
                <ConstructAvatar name={construct.name} id={construct.id} />
                <h2>{construct.name}</h2>
            </div>
        );
    });

    const spawnButtonsNum = (3 - constructs.length % 3);

    const spawnButtons = range(spawnButtonsNum)
        .map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);


    const header = (
        <div className="top">
            <button
                disabled={team.some(c => !c)}
                className="instance-btn instance-ui-btn right"
                onClick={() => navToList()}>
                Join Instance
            </button>
        </div>
    );

    return (
        <main className="menu-constructs">
            {header}
            <div className="constructs-list">
                {constructPanels}
                {spawnButtons}
            </div>
        </main>
    );
}

module.exports = addState(Team);