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

const addState = connect(
    function receiveState(state) {
        const { instance } = state;
        return { instance };
    },
);

function ScoreBoard(args) {
    const {
        instance,
    } = args;

    const players = instance.players.map((p, i) => {
        if (instance.phase === 'Finished') {
            const winner = p.wins > instance.max_rounds / 2;
            return <tr key={i}
                class={p.winner ? 'ready' : ''}>
                <td>{p.name}</td>
                <td>{p.wins} / {p.losses}</td>
                <td>{winner ? 'winner' : ''}</td>
            </tr>
        }

        const text = instance.phase === 'Finished'
            ? p.wins > instance.rounds / 2 && 'Winner'
            : '';

        return <tr key={i}
            class={p.ready ? 'ready' : ''}>
            <td>{p.name}</td>
            <td>{p.wins} / {p.losses}</td>
            <td>{p.ready ? 'ready' : ''}</td>
        </tr>
    });

    return (
        <table class="scoreboard" >
            <tbody>
                {players}
            </tbody>
        </table>
    );
}

module.exports = addState(ScoreBoard);