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

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            animating,
            game,
        } = state;

        function sendGameReady() {
            document.activeElement.blur()
            return ws.sendGameReady(game.id);
        }

        return {
            game,
            animating,
            sendGameReady,
        };
    },
);

function Controls(args) {
    const {
        game,
        animating,
        sendGameReady
    } = args;

    return (
        <aside class="controls">
            <button disabled={animating} class="ready" onClick={() => sendGameReady()}>Ready</button>
        </aside>
    );
}

module.exports = addState(Controls);