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

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"
        />
    );
}

class Triage 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='triage'
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
                <defs>
                    <filter id="triageFilter">
                        <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(#triageFilter)">
                    {this.charges}
                </g>
            </svg>
        );
    }

    componentDidMount() {
        this.animations.push(anime({
            targets: ['#triage'],
            opacity: [
                { value: 1, delay: TIMES.TARGET_DELAY_MS, 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',
            direction: 'reverse',
        }));
    }
}

module.exports = Triage;