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

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

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

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

class TriageTick extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        this.animations = [];
        const points = randomPoints(15, 10, { x: 0, y: 0, width: 300, height: 400 });
        this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
    }

    render() {
        return (
            <svg
                class="skill-animation"
                id="triageTick"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
                <defs>
                    <filter id="triageTickFilter">
                        <feGaussianBlur stdDeviation="3"/>
                        <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff"/>
                        <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
                    </filter>
                </defs>
                <g filter="url(#triageTickFilter)">
                    {this.charges}
                </g>
            </svg>
        );
    }

    componentDidMount() {
        this.animations.push(anime({
            targets: ['#triageTick'],
            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 },
            ],
            easing: 'easeInOutSine',
        }));

        this.animations.push(anime({
            targets: ['#triageTick circle'],
            cx: 150,
            cy: 200,
            duration: TIMES.TARGET_DURATION_MS,
            easing: 'easeInOutElastic',
        }));
    }

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

module.exports = addState(TriageTick);