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

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

const duration = TIMES.START_SKILL;

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

    componentDidMount() {
        anime.set('#siphon', {
            r: '140',
            stroke: '#3498db',
        });
        anime({
            targets: '#siphon',
            keyframes: [
                { r: '110', stroke: '#1FF01F' },
                { r: '80', stroke: '#1FF01F' },
                { r: '50', stroke: '#3498db' },
                { r: '20', stroke: '#3498db' },
            ],
            duration,
            easing: 'easeInCubic',
        });
    }
}

module.exports = AttackCharge;