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

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

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

function sword(colour) {
    return (
        <polygon points='150,150 100,75, 150,300, 200,75' stroke="none" fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
    );
}

class Slay extends Component {
    constructor() {
        super();
        this.animations = [];
        this.colour = '#a52a2a';
        const points = new Array(30).fill(0);
        this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
    }

    render() {
        return (
            <svg
                class={'skill-animation'}
                version="1.1"
                id="slay"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 300">
                <filter id="slayFilter">
                    <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>
                {sword(this.colour)}
                {this.charges}
            </svg>
        );
    }

    componentDidMount() {
        let rotate = 0; // Self target value
        if (this.props.direction.y) {
            if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
            else {
                rotate = this.props.direction.y > 0
                    ? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
                    : -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
            }
        } else if (this.props.direction.x) {
            rotate = this.props.direction.x > 0 ? 270 : 90;
        }

        anime.set('#slay', {
            rotate,
        });

        anime.set('#slay', {
            translateY: -1 * (window.innerHeight) * 0.35,
            translateX: 0,
        });

        anime.set('#slayFilter feDisplacementMap', {
            scale: 0,
        });

        anime.set('#sword', {
            fill: this.colour,
            opacity: 1,
        });

        this.animations.push(anime({
            targets: '#slay',
            opacity: [
                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
            ],
            translateY: 0,
            translateX: 0,
            loop: false,
            easing: 'easeInQuad',
        }));

        this.animations.push(anime({
            targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
            baseFrequency: 10,
            scale: 100,
            delay: TIMES.TARGET_DURATION_MS * 0.6,
            duration: TIMES.TARGET_DURATION_MS * 0.3,
            easing: 'easeInQuad',
        }));

        this.animations.push(anime({
            targets: '#sword',
            opacity: 0,
            delay: TIMES.TARGET_DURATION_MS * 0.9,
        }));

        const projectiles = document.querySelectorAll('#slay circle');
        projectiles.forEach(proj => {
            this.animations.push(anime({
                targets: proj,
                cx: Math.random() * 250 + 25,
                cy: Math.random() * 200 - 100,
                delay: TIMES.TARGET_DURATION_MS * 0.7,
                duration: TIMES.TARGET_DURATION_MS * 0.3,
                easing: 'easeInQuad',
            }));
        });
    }

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

module.exports = Slay;