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

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

class AttackCharge extends Component {
    constructor(props) {
        super();
        this.team = props.team;
        this.colour = props.colour;
        const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 });
        this.charges = points.map(coord => charge(coord[0], coord[1], 6, 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}
            </svg>
        );
    }

    componentDidMount() {
        const charges = document.querySelectorAll('#charge');
        anime.set(charges, { fill: 'none' });
        if (!this.team) {
            anime.set('.skill-anim', {
                rotate: 180,
            });
        } else {
            anime.set('.skill-anim', {
                rotate: 0,
            });
        }

        this.anim = anime({
            targets: charges,
            fill: this.colour,
            delay: anime.stagger(5, {
                start: 100,
                easing: 'linear',
            }),
            loop: false,
            easing: 'easeInQuad',
        });
    }

    componentWillUnmount() {
    }
}

module.exports = AttackCharge;