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

const addState = connect(
    (state) => {
        const { ws, cryps } = state;
        function sendGameJoin(gameId) {
            return ws.sendGameJoin(gameId, [cryps[0].id]);
        }

        return { account: state.account, sendGameJoin };
    },
);

function GameJoinButton({ account, sendGameJoin }) {
    let gameId = '';

    if (!account) return <div>...</div>;

    return (
        <div className="columns">
            <div className="column">
                <input
                    className="input"
                    type="text"
                    placeholder="gameId"
                    onChange={e => (gameId = e.target.value)}
                />
            </div>
            <div className="column is-4">
                <button
                    className="button is-dark is-fullwidth"
                    type="submit"
                    onClick={() => sendGameJoin(gameId)}>
                    Join Game
                </button>
            </div>
        </div>
    );
}

module.exports = addState(GameJoinButton);