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

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

const duration = TIMES.START_SKILL;

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

    render() {
        return (
            <svg
                id={this.props.id}
                class={`attack-anim skill-animation ${this.props.stage}`}
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 300">
                <g>
                    <polygon class='blue' points={'0,190    100,50   190,190'}/>
                    <polygon class='blue' points={'40,170    100,50   160,170'}/>
                    <polygon class='blue' points={'70,150    100,50   130,150'}/>
                </g>
            </svg>
        );
    }

    componentDidMount() {
        let value = '';
        if ((!this.props.team && this.props.stage === 'START_SKILL')
            || (this.props.team && this.props.stage === 'END_SKILL')) {
            anime.set('.attack-anim', {
                translateY: -250,
            });
            value = '+=250px';
        }
        if ((!this.props.team && this.props.stage === 'END_SKILL')
            || (this.props.team && this.props.stage === 'START_SKILL')) {
            anime.set('.attack-anim', {
                translateY: 0,
            });
            value = '-=250px';
        }

        anime({
            targets: ['.attack-anim'],
            translateY: {
                value,
                duration,
            },
            loop: false,
            duration,
            easing: 'easeInQuad',
        });
    }
}

module.exports = Attack;