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

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

const duration = TIMES.TARGET_DURATION_MS;


function projectile(x, y, radius, colour) {
    return (
        <circle
            cx={x}
            cy={y}
            r={radius}
            fill="url(#grad1)"
            stroke-width="0.1"
            stroke={colour}
            id="projectile"
        />
    );
}

class SiphonTick extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        // this.colour = props.colour;
        this.colour = '#3498db';
        const points = new Array(15).fill(0);
        this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
    }

    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="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>

                <defs>
                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                        <stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
                        <stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
                    </radialGradient>
                </defs>
                <filter id="explosion">
                    <feGaussianBlur stdDeviation="4"/>
                    <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
                </filter>

                {this.charges}
            </svg>
        );
    }

    componentDidMount() {
        if (!this.props.team) {
            anime.set('.skill-anim', {
                rotate: 90
            });
        } else {
            anime.set('.skill-anim', {
                rotate: 270
            });
        }

        anime.set('#projectile', {
            cx: 150,
            cy: 150,
        });

        anime.set('#siphon', {
            r: '80',
            stroke: '#3498db',
        });

        anime({
            targets: '#siphon',
            keyframes: [
                { r: '50', stroke: '#3498db' },
                { r: '20', stroke: '#3498db' },
                { r: '0', stroke: '#3498db' },
            ],
            duration: duration * 2 / 3,
            easing: 'easeInCubic',
        });

        const projectiles = document.querySelectorAll('#projectile');
        projectiles.forEach(proj => {
            anime({
                targets: proj,
                cx: Math.random() * 250 + 25,
                cy: Math.random() * 200 - 100,
                delay: (Math.random() * duration * 1 / 2),
                duration,
                easing: 'easeInQuad',
            });
        });
    }
}

module.exports = SiphonTick;