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

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

const duration = TIMES.TARGET_DURATION_MS;


function laser(dimensions, colour) {
    const { x, y, length } = dimensions;
    return (
        <rect
            width="18"
            height={length}
            x={x}
            y={y}
            fill="url(#grad1)"
            stroke-width="2"
            stroke={colour}
            filter="url(#explosion)"
        />
    );
}

class Strike extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        // this.colour = props.colour;
        this.colour = props.colour;

        const coord = [0, 100, 200];
        const points = coord.map(pos => ({
            x: pos + Math.random() * 80,
            y: 50 + Math.random() * 100,
            length: 150 + Math.random() * 100,
        }));
        this.charges = points.map(pos => laser(pos, this.colour));
    }

    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:${this.colour};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,
            });
        }
        anime.set('.skill-anim', {
            translateY: -200,
            translateX: 0,
        });
        anime.set('#explosion feDisplacementMap', {
            scale: 1,
        });

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

module.exports = Strike;