const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;

const banish = require('./anims/banish');
const idleAnimation = require('./anims/idle');
const invert = require('./anims/invert');
const sourceCast = require('./anims/source.cast');

const addState = connect(
    function receiveState(state) {
        const { avatarAnimation } = state;
        return { avatarAnimation };
    }
);

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

    render() {
        return (
            <div
                class="avatar"
                id={this.props.construct.id}
                style={{ 'background-image': `url(/imgs/32809d3b-60e6-4d37-a183-e5d33374613b.svg)` }}
            />
        );
    }

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

    componentWillReceiveProps(nextProps) {
        if (nextProps.avatarAnimation.id === -1) this.animId = 0; // The current set of resolutions ended reset to 0
        if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.construct.id) {
            this.animId = nextProps.avatarAnimation.id;
            const selectAnim = () => {
                switch (nextProps.avatarAnimation.type) {
                case 'banish': return banish(this.props.construct.id);
                case 'invert': return invert(this.props.construct.id);
                case 'sourceCast': return sourceCast(this.props.construct.id, nextProps.avatarAnimation.params);
                default: return null;
                }
            };
            const anim = selectAnim();
            if (anim) {
                this.idle.pause();
                this.animations.push(anim);
                anim.finished.then(this.idle.play);
            }
        }
    }

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

module.exports = {
    ConstructAvatar: addState(ConstructAvatar),
};