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

const anime = require('animejs').default;
const { TIMES } = require('../../constants');

class Invert extends Component {
    constructor(props) {
        super();
        this.id = props.id;
        this.animations = [];
    }

    render() {
        // Need this so unmount triggers
        return <svg id='invert'></svg>;
    }

    componentDidMount() {
        this.animations.push(anime({
            targets: [document.getElementById(this.id)],
            rotate: 180,
            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS * 0.45,
            easing: 'easeInOutElastic',
            direction: 'alternate',
        }));
    }

    // this is necessary because
    // skipping / timing / unmounting race conditions
    // can cause the animations to cut short, this will ensure the values are reset
    // because preact will recycle all these components
    componentWillUnmount() {
        for (let i = this.animations.length - 1; i >= 0; i--) {
            this.animations[i].reset();
        }
    }
}

module.exports = Invert;