function jqueryAnimate($el, settings) {
    var properties = {},
        current = $el.position();
    var { animation, duration, callback } = settings;
    let match = animation.match(/([a-z]+)-(.*)/),
        verb = match[1],
        direction = match[2];

    current.width = $el.width();
    current.height = $el.height();
    current.bottom = $el.parent().innerHeight() - (current.top + current.height);
    current.right = $el.parent().innerWidth() - (current.left + current.width);

    switch (verb) {
        case 'bounce':
            switch (direction) {
                case 'up':
                    $el.css({
                        'bottom': 'auto',
                        'top': $el.parent().height()
                    });
                    $el.animate({ 'top': current.top })
                        .animate({ 'top': '+=10' })
                        .animate({ 'top': current.top });
                    break;
                case 'down':
                    $el.css({
                        'top': 'auto',
                        'bottom': $el.parent().height()
                    });
                    $el.animate({ 'bottom': current.bottom })
                        .animate({ 'bottom': '+=10' })
                        .animate({ 'bottom': current.bottom });
                    break;
                case 'right':
                    $el.css({
                        'right': 'auto',
                        'left': $el.parent().width()
                    });
                    $el.animate({ 'left': current.left })
                        .animate({ 'left': '+=10' })
                        .animate({ 'left': current.left });
                    break;
                case 'left':
                    $el.css({
                        'left': 'auto',
                        'right': $el.parent().width()
                    });
                    $el.animate({ 'right': current.right })
                        .animate({ 'right': '+=10' })
                        .animate({ 'right': current.right });
                    break;
            }
            break;
        case 'flip':
            break;
        case 'fade':
            switch (direction) {
                case 'in':
                    $el.css({ 'opacity': 0 });
                    $el.animate({ 'opacity': 1 }, {
                        duration: 1000
                    });
                    break;
                case 'up':
                    $el.css({
                        'opacity': 0,
                        'bottom': 'auto',
                        'top': current.top + 30
                    });
                    $el.animate({
                       'opacity': 1,
                       'top': current.top
                    });
                    break;
                case 'down':
                    $el.css({
                        'opacity': 0,
                        'top': 'auto',
                        'bottom': current.bottom + 30
                    });
                    $el.animate({
                       'opacity': 1,
                       'bottom': current.bottom
                    });
                    break;
                case 'right':
                    $el.css({
                        'opacity': 0,
                        'right': 'auto',
                        'left': current.left + 30
                    });
                    $el.animate({
                       'opacity': 1,
                       'left': current.left
                    });
                    break;
                case 'left':
                    $el.css({
                        'opacity': 0,
                        'left': 'auto',
                        'right': current.right + 30
                    });
                    $el.animate({
                       'opacity': 1,
                       'right': current.right
                    });
                    break;
            }
            break;
        case 'slide':
            switch (direction) {
                case 'up':
                    $el.css({
                        'bottom': 'auto',
                        'top': $el.parent().height()
                    });
                    $el.animate({ 'top': current.top });
                    break;
                case 'down':
                    $el.css({
                        'top': 'auto',
                        'bottom': $el.parent().height()
                    });
                    $el.animate({ 'bottom': current.bottom });
                    break;
                case 'right':
                    $el.css({
                        'right': 'auto',
                        'left': $el.parent().width()
                    });
                    $el.animate({ 'left': current.left });
                    break;
                case 'left':
                    $el.css({
                        'left': 'auto',
                        'right': $el.parent().width()
                    });
                    $el.animate({ 'right': current.right });
                    break;
            }
            break;
        case 'rotate':
            break;
        case 'shake':
            break;
    }

    if (callback) {
        $el.promise().done(callback);
    }
}

function cssAnimate($el, settings) {
    var { animation, duration, callback, isMobile } = settings;
    let className = `buyercall-${animation}`;

    // Only allow shake animation on mobile devices
    if (isMobile) {
        className = 'buyercall-shake';
    }

    $el.removeClass(className);
    setTimeout(() => {
        $el.unbind('oanimationend animationend webkitAnimationEnd');
        $el.bind('oanimationend animationend webkitAnimationEnd', () => {
            $el.removeClass(className);
        });
        $el.addClass(className);
    });
    if (callback) {
        callback();
    }
}

function detectAnimation() {
    var elm = document.createElement('div'),
        supportsAnimation = (elm.style.animationName !== undefined);

    return supportsAnimation;
}

function animate($el, settings) {
    var supportsAnimation = detectAnimation();

    if (supportsAnimation) {
        return cssAnimate($el, settings);
    } else {
        return jqueryAnimate($el, settings);
    }
}


module.exports = animate;