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

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

const addState = connect(
    function receiveState(state) {
        const { animCb } = state;
        return { animCb };
    }
);

function projectile(x, y, radius, colour) {
    return (
        <circle
            cx={x}
            cy={y}
            r={radius}
            fill={colour}
            filter={colour === '#a52a2a' ? 'url(#chaosRedFilter)' : 'url(#chaosBlueFilter)'}
        />
    );
}

class Chaos extends Component {
    constructor() {
        super();
        this.animations = [];
        const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
        this.charges = points.map(coord => {
            const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
            return projectile(coord[0], coord[1], 14, 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">
                <defs>
                    <filter id="chaosBlueFilter">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
                        <feMerge>
                            <feMergeNode />
                            <feMergeNode in="SourceGraphic" />
                        </feMerge>
                    </filter>
                    <filter id="chaosRedFilter">
                        <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                    </filter>
                </defs>
                {this.charges}
            </svg>
        );
    }

    componentDidMount() {
        const projectiles = document.querySelectorAll('.skill-anim circle');
        anime.set('.skill-anim', {
            translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
            translateX: -(window.innerWidth) * 0.15 * 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 },
            ],
        }));


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

        this.animations.push(anime({
            targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
            baseFrequency: 2,
            scale: 20,
            numOctaves: 5,
            easing: 'easeOutSine',

            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS,
        }));

        projectiles.forEach(proj => this.animations.push(anime({
            targets: proj,
            cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
            cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
            // cx: 150,
            // cy: 200,
            // opacity: 0,

            delay: TIMES.TARGET_DELAY_MS,
            duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
            easing: 'easeInQuad',
        })));
    }

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

module.exports = addState(Chaos);