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

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

const addState = connect(
    function receiveState(state) {
        const { team, showNav } = state;

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

        function setShowNav(v) {
            return dispatch(actions.setShowNav(v));
        }

        return {
            navToList,
            setShowNav,
        };
    }
);

function TeamFooter(args) {
    const {
        showNav,
        team,
        navToList,
        setShowNav,
    } = args;

    if (!team) return false;

    return (
        <footer>
            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
            <button
                disabled={team.some(c => !c)}
                onClick={() => navToList()}>
                Confirm
            </button>
        </footer>
    );
}

module.exports = addState(TeamFooter);