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 };
    }
);

function projectile(x, y, radius, colour) {
    return (
        <circle
            cx={x}
            cy={y}
            r={radius}
            stroke="none"
            fill={colour}
        />
    );
}

class SiphonTick extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        this.animations = [];
        this.colour = '#3050f8';
        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 300">
                <filter id="blur">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                </filter>
                <circle id="siphon" r="20" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
                <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('.skill-anim circle', {
            cx: 150,
            cy: 150,
        });

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

        anime({
            targets: '#siphon',
            r: 600,
            duration: duration * 2 / 3,
            easing: 'easeInSine',
        });

        const projectiles = document.querySelectorAll('.skill-anim circle');
        projectiles.forEach(proj => {
            anime({
                targets: proj,
                cx: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                delay: (Math.random() * duration * 1 / 2),
                duration,
                easing: 'easeOutQuad',
            });
        });
    }

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

module.exports = addState(SiphonTick);