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

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

const duration = TIMES.START_SKILL;

class Attack extends Component {
    constructor(props) {
        super();
        this.props = props;
    }

    render() {
        return (
            <svg
                class={'attack-anim'}
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
                {dagger(10, 250, 40, 150)}
                {dagger(50, 250, 40, 150)}
                {dagger(90, 250, 40, 150)}
                {dagger(130, 250, 40, 150)}
                {dagger(170, 250, 40, 150)}
                {dagger(210, 250, 40, 150)}
                {dagger(250, 250, 40, 150)}
            </svg>
        );
    }

    componentDidMount() {
        let y = 0;
        const daggers = document.querySelectorAll('.attack-anim .dagger');
        if (this.props.stage === 'START_SKILL') {
            anime.set(daggers, {
                y: 250,
            });
            y = -150;
            if (!this.props.team) {
                anime.set('.attack-anim', {
                    rotate: 180,
                });
            } else {
                anime.set('.attack-anim', {
                    rotate: 0,
                });
            }
        }

        if (this.props.stage === 'END_SKILL') {
            anime.set(daggers, {
                y: 400,
            });
            y = -150;
            if (!this.props.team) {
                anime.set('.attack-anim', {
                    rotate: 0,
                });
            } else {
                anime.set('.attack-anim', {
                    rotate: 180,
                });
            }
        }

        anime({
            targets: daggers,
            delay: anime.stagger(250, {
                start: 250,
                grid: [1, 7],
                from: 'center',
                easing: 'linear',
            }),
            y,
            duration,
        });
    }
}

module.exports = Attack;