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(props) {
        super();
        this.team = props.team;
        this.animations = [];
        const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
        this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
    }

    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="50%" r="70%" fx="50%" fy="50%">
                        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
                        <stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
                    </radialGradient>
                </defs>
                <filter id="explosion">
                    <feGaussianBlur stdDeviation="4"/>
                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>

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

    componentDidMount() {
        anime.set('.skill-anim', {
            translateY: -300 * this.props.direction.y,
            translateX: -200 * this.props.direction.x,
            opacity: 0,
        });

        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.set('#explosion feDisplacementMap', {
            scale: 1,
        });

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

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

module.exports = AttackCharge;