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 Heal extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        this.animations = [];
        const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 });
        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#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">
                <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:#1FF01F;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() {
        anime.set('#explosion feDisplacementMap', {
            scale: 100,
        });
        anime.set('.skill-anim', {
            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.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
            ],
        }));

        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: 1,
            loop: false,
            delay: TIMES.TARGET_DELAY_MS,
            duration: (duration * 1 / 2),
            easing: 'easeInQuad',
        }));
        this.animations.push(anime({
            targets: '#projectile',
            cx: 150,
            cy: 200,
            delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
            duration: (duration * 1 / 2),
            easing: 'easeInQuad',
        }));
    }
}

module.exports = Heal;