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

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

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

class Hybrid extends Component {
    constructor() {
        super();
        this.animations = [];
    }

    render() {
        return (
            <svg
                class="skill-animation"
                id="hybrid"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 300">
                <defs>
                    <filter id="hybridFilter">
                        <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(#hybridFilter)">
                    <circle
                        class="green-one"
                        cx='50'
                        cy='150'
                        r="15"
                        fill={COLOURS.GREEN}
                        stroke="none"
                    />
                    <circle
                        class="green-two"
                        cx='250'
                        cy='150'
                        r="15"
                        fill={COLOURS.GREEN}
                        stroke="none"
                    />
                    <circle
                        class="bluewhite-one"
                        cx='150'
                        cy='50'
                        r="15"
                        fill={COLOURS.BLUE}
                        stroke="none"
                    />
                    <circle
                        class="bluewhite-one"
                        cx='150'
                        cy='50'
                        r='7'
                        fill={COLOURS.WHITE}
                        stroke="none"
                    />
                    <circle
                        class="bluewhite-two"
                        cx='150'
                        cy='250'
                        r="15"
                        fill={COLOURS.BLUE}
                        stroke="none"
                    />
                    <circle
                        class="bluewhite-two"
                        cx='150'
                        cy='250'
                        r='7'
                        fill={COLOURS.WHITE}
                        stroke="none"
                    />
                </g>
            </svg>
        );
    }

    componentDidMount() {
        this.animations.push(anime({
            targets: ['#hybrid'],
            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 },
            ],
            transform: {
                value: ['rotate(0)', 'rotate(360)'],
                delay: TIMES.TARGET_DELAY_MS,
                duration: TIMES.TARGET_DURATION_MS,
                direction: 'alternate',
            },
            easing: 'easeInOutSine',
        }));

        this.animations.push(anime({
            r: [10, anime.random(10, 30)],
            targets: ['#hybrid circle.green-one'],
            cx: [50, 250, 50, 250],
            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS,
            easing: 'easeInOutSine',
            loop: true,
        }));

        this.animations.push(anime({
            r: [10, anime.random(10, 30)],
            targets: ['#hybrid circle.green-two'],
            cy: [250, 50, 250, 50],
            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS,
            easing: 'easeInOutSine',
            loop: true,
        }));

        this.animations.push(anime({
            r: [10, anime.random(10, 30)],
            targets: ['#hybrid circle.bluewhite-one'],
            fill: [COLOURS.WHITE, COLOURS.BLUE],
            cy: [50, 250, 50, 250],
            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS,
            easing: 'easeInOutSine',
            loop: true,
        }));

        this.animations.push(anime({
            r: [10, anime.random(10, 30)],
            targets: ['#hybrid circle.bluewhite-two'],
            cx: [250, 50, 250, 50],
            fill: [COLOURS.WHITE, COLOURS.BLUE],
            delay: TIMES.TARGET_DELAY_MS,
            duration: TIMES.TARGET_DURATION_MS,
            easing: 'easeInOutSine',
            loop: true,
        }));
    }

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

module.exports = addState(Hybrid);