const preact = require('preact');
const { Component } = require('preact');

class TrippyTriangle extends Component {
    constructor() {
        super();
        this.state = { pct: 0, delta: 0 };
        this.progress = this.progress.bind(this);
    }

    render() {
        const { pct, delta } = this.state;

        return (
            <svg
                style={{
                    transform: `rotate3d(0, 1, 0, ${delta * 0.2}rad) translate(0px, ${-7.5 * delta}px)`,
                }}
                class='skill-animation'
                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,${pct}   190,190`}/>
                    <polygon class='blue' points={`40,170    100,${pct}   160,170`}/>
                    <polygon class='blue' points={`70,150    100,${pct}   130,150`}/>
                </g>
            </svg>
        );
    }

    progress() {

        requestAnimationFrame(this.progress);
        this.now = window.performance.now();
        const elapsed = this.now - this.then;
        if (elapsed > this.fpsInterval) {
            this.then = this.now - (elapsed % this.fpsInterval);
            const delta = this.state.delta + Math.PI * 0.04;
            const pct = 75 + 15 * Math.sin(delta);
            this.setState({ pct, delta });
        }
    }

    componentDidMount() {
        const fps = 30;
        this.fpsInterval = 1000 / fps;
        this.then = window.performance.now();
        requestAnimationFrame(this.progress);
    }

    componentWillUnmount() {
        // clearAnimation(this.props.id);
    }
}

module.exports = TrippyTriangle;