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

const anime = require('animejs').default;

const genAvatar = name => {
    let hash = 0;
    if (name.length === 0) return hash;
    // Probs don't need to hash using the whole string
    for (let i = 0; i < name.length; i += 1) {
        const chr = name.charCodeAt(i);
        hash = ((hash << 5) - hash) + chr;
        hash = hash % 10000;
    }
    return `${hash}`;
};

const animations = {};
function animateConstruct(id) {
    if (animations[id]) return false;
    animations[id] = true;
    const duration = anime.random(2000, 18000);
    const target = document.getElementById(id);
    return anime({
        targets: target,
        translateX: () => anime.random(-20, 20),
        translateY: () => anime.random(0, -40),
        rotate: () => anime.random(-15, 15),
        duration,
        direction: 'alternate',
        easing: 'linear',
        loop: true,
        complete: () => animations[id] = false,
    });
}

function clearAnimation(id) {
    animations[id] = false;
}

class ConstructAvatar extends Component {
    render() {
        return (
            <div
                class="avatar"
                id={this.props.id}
                style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
            />
        );
    }

    componentDidMount() {
        animateConstruct(this.props.id);
    }

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

class ConstructImg extends Component {
    render() {
        return (
            <img
                class="avatar"
                id={this.props.id}
                src={`/molecules/${genAvatar(this.props.name)}.svg`}
                height="500"
                onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
            />
        );
    }

    componentDidMount() {
        animateConstruct(this.props.id);
    }

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

module.exports = {
    ConstructAvatar,
    ConstructImg,
};