const { Component } = require('preact');
const preact = require('preact');

const idleAnimation = require('./anims/idle');
const wiggle = require('./anims/wiggle');

class Img extends Component {
    constructor() {
        super();
        // The animation ids are a check to ensure that animations are not repeated
        // When a new account animation is communicated with state it will have a corresponding Id
        // which is a count of how many resoluttions have passed
        this.animations = [];
        this.resetAnimations = this.resetAnimations.bind(this);
    }

    render() {
        const { id, img } = this.props;
        const imgStyle = img
            ? { 'background-image': `url(/imgs/${img}.svg)` }
            : null;
        return (
            <div
                class="img avatar"
                id={id}
                onMouseDown={this.onClick.bind(this)}
                style={imgStyle}>
            </div>
        );
    }

    onClick() {
        if (this.props.mtxActive) {
            return this.props.sendMtxAccountApply();
        }
        return this.animations.push(wiggle(this.props.id, this.idle));
    }

    componentDidMount() {
        this.idle = idleAnimation(this.props.id);
        return this.animations.push(this.idle);
    }

    resetAnimations() {
        for (let i = this.animations.length - 1; i >= 0; i--) {
            this.animations[i].reset();
        }
    }

    componentWillUnmount() {
        this.resetAnimations();
    }
}

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

    const scoreText = () => {
        if (player.score === 'Zero' || player.score === 'Lose') 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 '';
    };

    const winner = player.score === 'Win';

    if (!isPlayer) {
        return (
            <div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
                <div></div>
                <div class="score">{scoreText()}</div>
                <div class="name">{player.name}</div>
                <Img img={player.img} id={player.id} />
                <div class="msg">{chat || '\u00A0'}</div>
            </div>
        );
    }

    return (
        <div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
            <div class="msg">{chat || '\u00A0'}</div>
            <div class="score">{scoreText()}</div>
            <div class="name">{player.name}</div>
            <Img img={player.img} id={player.id} />
        </div>
    );
}

module.exports = Scoreboard;