const preact = require('preact');

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

    const scoreText = () => {
        if (player.score === 'Zero') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
        if (player.score === 'One') return [<span i={0}>■</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
        if (player.score === 'Two') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>▫</span>];
        if (player.score === 'Win') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>■</span>];
        return '';
    };

    /*
    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 '';
    };
    */

    const imgStyle = player.img
        ? { 'background-image': `url(/imgs/${player.img}.svg)` }
        : null;

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


    return (
        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
            <div class="msg">hfhf</div>
            <div class="score">{scoreText()}</div>
            <div class="name">{player.name}</div>
            <div class="img avatar" id={player.img} style={imgStyle}></div>
        </div>
    );
}

module.exports = Scoreboard;