const preact = require('preact');

function Scoreboard(args) {
    const {
        abandon,
        isPlayer,
        player,
        isGame,
        clear,
    } = args;

    let scoreText = () => {
        if (player.score === 'Zero') return '▫▫▫▫';
        if (player.score === 'One') return '■▫▫▫';
        if (player.score === 'Two') return '■■▫▫';
        if (player.score === 'Three') return '■■■▫';
        if (player.score === 'Adv') return '■■■+';
        if (player.score === 'Win') return '■■■■';
        return '';
    };

    if (!isPlayer) {
        return (
            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
                <div class="ctrl">&nbsp;</div>
                <div class="score">{scoreText()}</div>
                <div class="img">
                    <div>{player.name}</div>
                </div>
            </div>
        );
    }

    return (
        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
            <div class="score">{scoreText()}</div>
            <div class="img">
                <div>{player.name}</div>
            </div>
            <div>
                {(isPlayer && isGame) ? <button onClick={clear}>Clear</button> : null}
            </div>
            <div>
                {abandon ? <button onClick={abandon}>Abandon</button> : null}
            </div>
        </div>
    );
}

module.exports = Scoreboard;