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

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

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            account,
            mtxActive,
        } = state;

        function sendMtxAccountApply() {
            return ws.sendMtxAccountApply(mtxActive);
        }

        return {
            account,
            mtxActive,

            sendMtxAccountApply,
        };
    }
);

class AccountAvatar 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;
        const imgStyle = account.img
            ? { 'background-image': `url(/imgs/${account.img}.svg)`, cursor: mtxActive ? 'pointer' : '' }
            : null;
        return (
            <div
                class="img avatar"
                id={account.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.account.id, this.idle));
    }

    componentDidMount() {
        this.idle = idleAnimation(this.props.account.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();
    }

    // shouldComponentUpdate(newProps) {
    //     const { account } = newProps;

    //     if (account !== this.props.account) {
    //         return true;
    //     }

    //     return false;
    // }
}

const StateAccountAvatar = addState(AccountAvatar);

function AccountBox(args) {
    const {
        account,
    } = args;

    // if (!isTop) {
    //     return (
    //         <div class='player-box top'>
    //             <div class="name">Processor</div>
    //             <div class="img avatar" id={account.img} style={imgStyle}></div>
    //             <div class="msg">&nbsp;</div>
    //         </div>
    //     );
    // }

    const nameClass = `name ${account.subscribed ? 'subscriber' : ''}`;

    return (
        <div class='player-box bottom'>
            <div class="msg">&nbsp;</div>
            <StateAccountAvatar />
            <div class={nameClass}>{account.name}</div>
            <div class="score">&nbsp;</div>
        </div>
    );
}

module.exports = addState(AccountBox);