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

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

class MnniAvatatr 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 { account, mtxActive } = this.props;
        return (
            <div
                class="img avatar mnni"
                id="mnni"
                onMouseDown={this.onClick.bind(this)}>
            </div>
        );
    }

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

    componentDidMount() {
        this.idle = idleAnimation('mnni');
        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 Mnni(args) {
    return (
        <div class='player-box top'>
            <MnniAvatatr />
            <div class="msg">hi!</div>
            <div class="name">MNNI</div>
            <div class="score">&nbsp;</div>
        </div>
    );
}

module.exports = Mnni;