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

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

        function sendInstanceState(id) {
            ws.sendInstanceState(id);
        }

        function sendInstancePractice() {
            ws.sendInstancePractice();
        }

        function sendInstanceQueue() {
            ws.sendInstanceQueue();
        }

        return {
            instances,

            sendInstanceState,
            sendInstanceQueue,
            sendInstancePractice,
        };
    }
);

function JoinButtons(args) {
    const {
        instances,

        sendInstanceState,
        sendInstanceQueue,
        sendInstancePractice,
    } = args;

    if (instances.length) {
        return (
            <aside class='play-ctrl'>
                <div class="timer-container"></div>
                <div class="controls">
                    <button
                        class='pvp ready full'
                        onClick={() => sendInstanceState(instances[0].id)}
                        type="submit">
                        Rejoin
                    </button>
                </div>
            </aside>
        );
    }

    return (
        <aside class='play-ctrl'>
            <div class="timer-container"></div>
            <div class="controls">
                <button
                    class='pvp ready'
                    onClick={() => sendInstanceQueue()}
                    type="submit">
                    PVP
                </button>
                <button
                    class='practice ready'
                    onClick={() => sendInstancePractice()}
                    type="submit">
                    Learn
                </button>
                <button
                    class='discord-btn'
                    onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
                    &nbsp;
                </button>
            </div>
        </aside>
    );
}

module.exports = addState(JoinButtons);