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

// dunno if this is a good idea
// bashing together instance and game to save having two panels

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

        function sendReady() {
            document.activeElement.blur()
            if (game) return ws.sendGameReady(game.id);
            if (instance) return ws.sendInstanceReady(instance.id);
            return false;
        }

        const gameObject = game || instance;

        return {
            gameObject,
            sendReady,
            account,
            animating,
        };
    },
);

function scoreboard(gameObject, player, isOpponent) {
    const text = gameObject.phase === 'Finished'
        ? player.wins > gameObject.rounds / 2 && 'Winner'
        : '';

    const classes =`scoreboard ${player.ready ? 'ready' : ''}`;

    const body = isOpponent
        ? (
            <tbody>
                <tr><td>{player.name}</td></tr>
                <tr><td>{player.wins} / {player.losses}</td></tr>
                <tr><td>{player.ready ? 'ready' : ''}</td></tr>
            </tbody>
        ) : (
            <tbody>
                <tr><td>{player.ready ? 'ready' : ''}</td></tr>
                <tr><td>{player.wins} / {player.losses}</td></tr>
                <tr><td>{player.name}</td></tr>
            </tbody>
        );

    return (
        <table class={classes}>
            {body}
        </table>
    );
}

function Controls(args) {
    const {
        account,
        gameObject,
        animating,
        sendReady,
    } = args;

    if (!gameObject) return false;

    const opponent = gameObject.players.find(t => t.id !== account.id);
    const player = gameObject.players.find(t => t.id === account.id);

    return (
        <aside class="controls">
            {scoreboard(gameObject, opponent, true)}
            <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
            {scoreboard(gameObject, player)}
        </aside>
    );
}

module.exports = addState(Controls);