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

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

const duration = TIMES.TARGET_DURATION_MS;

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

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

    render() {
        return (
            <svg
                class={'skill-anim'}
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400"
                opacity="0">
                <filter id="blur">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                </filter>
                <circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
            </svg>
        );
    }

    componentDidMount() {
        anime.set('#siphon', {
            r: '140',
            stroke: '#3050f8',
        });

        this.animations.push(anime({
            targets: '.skill-anim',
            opacity: [
                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
            ],
        }));

        anime({
            targets: '#siphon',
            keyframes: [
                { r: '110', stroke: '#1FF01F' },
                { r: '80', stroke: '#1FF01F' },
                { r: '50', stroke: '#3050f8' },
                { r: '20', stroke: '#3050f8' },
            ],
            delay: TIMES.TARGET_DELAY_MS,
            duration,
            easing: 'easeInCubic',
        });
    }

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

}

module.exports = addState(Siphon);