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

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

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="2"
            stroke={colour}
            id="projectile"
            filter="url(#explosion)"
        />
    );
}

class AttackCharge extends Component {
    constructor() {
        super();
        this.animations = [];
        const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1'));
    }

    render() {
        return (
            <svg
                class={'skill-anim'}
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
                // {this.charges}
                <defs>
                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
                        <stop offset="100%" style={`stop-color:#A25AC1;stop-opacity:1`} />
                    </radialGradient>
                </defs>
                <filter id="explosion">
                    <feGaussianBlur stdDeviation="4"/>
                    <feTurbulence type="turbulence" baseFrequency="0.01" 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: Math.random() * 180 + 90,
            });
        } else {
            anime.set('.skill-anim', {
                rotate: Math.random() * 180 + 270,
            });
        }
        const projectiles = document.querySelectorAll('#projectile');
        projectiles.forEach(proj => {
            const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db';
            anime.set(proj, {
                stroke: colour,
            });
        });

        anime.set('.skill-anim', {
            translateY: -200,
            translateX: 0,
            opacity: 0,
        });
        anime.set('#explosion feDisplacementMap', {
            scale: 1,
        });

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


        this.animations.push(anime({
            targets: '.skill-anim',
            translateY: 0,
            translateX: 0,
            loop: false,
            delay: TIMES.TARGET_DELAY_MS,
            duration: (duration * 1 / 2),
            easing: 'easeInQuad',
        }));
        this.animations.push(anime({
            targets: '#explosion feDisplacementMap',
            scale: 75,
            loop: false,
            delay: (TIMES.TARGET_DELAY_MS + duration * 2 / 3),
            duration: (duration * 1 / 3),
            easing: 'easeInQuad',
        }));

        projectiles.forEach(proj => anime({
            targets: proj,
            cx: Math.random() * 250 + 25,
            cy: Math.random() * 300 + 50,
            delay: TIMES.TARGET_DELAY_MS,
            duration: (duration * 2 / 3),
            easing: 'easeInQuad',
        }));
    }

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

}

module.exports = AttackCharge;