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

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

        function sendInstanceNew(sConstructs, pve) {
            if (sConstructs.length) {
                return ws.sendInstanceNew(sConstructs, account.name, pve);
            }
            return false;
        }

        return {
            sendInstanceNew,
            team,
        };
    }
);

function CreateButtons(args) {
    const { team, sendInstanceNew } = args;
    const disabled = !team.every(c => c);

    const classes = `create-form ${disabled ? 'disabled' : ''}`;
    return (
        <div class={classes}>
            <button
                onClick={() => sendInstanceNew(team, true)}
                disabled={disabled}
                type="submit">
                Practice vs CPU
            </button>
            <button
                onClick={() => sendInstanceNew(team, false)}
                disabled={disabled}
                type="submit">
                PVP
            </button>
        </div>
    );
}

module.exports = addState(CreateButtons);