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

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

const addState = connect(
    function receiveState(state) {
        const {
            constructs,
            teamPage,
            teamSelect,
            ws,
        } = state;

        function sendAccountSetTeam() {
            return ws.sendAccountSetTeam(teamSelect);
        }

        return {
            constructLength: constructs.length,
            sendAccountSetTeam,
            teamPage,
            teamSelect,
        };
    },

    function receiveDispatch(dispatch) {
        function setTeamPage(value) {
            return dispatch(actions.setTeamPage(value));
        }
        return {
            setTeamPage,
        };
    }
);

function TeamCtrl(args) {
    const {
        constructLength,
        sendAccountSetTeam,
        setTeamPage,
        teamPage,
        teamSelect,
    } = args;

    const disableDecrement = teamPage === 0;
    const disableIncrement = (teamPage + 1) * 6 >= constructLength;
    return (
        <aside>
            <div class="timer-container"></div>
            <button
                class='ready'
                disabled={teamSelect.some(c => !c)}
                onClick={sendAccountSetTeam}>
                Set
            </button>
            <div class="team-page-ctrl">
                <button onClick={() => setTeamPage(teamPage - 1)} disabled={disableDecrement}> &laquo; </button>
                <h2> {teamPage} </h2>
                <button onClick={() => setTeamPage(teamPage + 1)} disabled={disableIncrement}> &raquo; </button>
            </div>
        </aside>
    );
}

module.exports = addState(TeamCtrl);