$(function () {
    $('body').on('submit', '[data-type="ajax"]', function () {
        const element = $(this)

        let values = {}

        element.find('input').each(function () {
            if ($(this).attr('name') !== undefined) {
                if ($(this).attr('type') === 'checkbox') {
                    if ($(this).prop('checked')) {
                        values[$(this).attr('name')] = $(this).prop('checked') ? 'on' : ''
                    }
                } else {
                    values[$(this).attr('name')] = $(this).val()
                }
            }
        });

        $.post(
            element.attr('action'),
            values,
            function (response) {
                if (response.type !== undefined) {
                    handleMessage(response)
                }

                if (element.data('reload-on-submit') !== undefined) {
                    reloadElementWithAjaxFromUrl(element.data('reload-on-submit'))
                }
            }
        )
            .fail(function(a, b, c) {
                console.log('a', a,'b', b,'c', c)
            })

        return false;
    })

    const timer = $('#nextRoundTimer');

    if (timer.length > 0) {
        let secondsLeft = 30
        setInterval(function () {
            timer.find('.seconds').html(--secondsLeft)

            if (secondsLeft < 0) {
                secondsLeft = 0
            }

            if (secondsLeft < 1) {
                timer.find('button').trigger('click')
            }
        }, 1000);
    }
});

function flash(speed, opacity) {
    $('*').animate({
        'opacity': opacity
    }, speed, function () {
        $(this).animate({
            'opacity': 1
        }, speed, function () {
            $(this).removeAttr('style')
        })
    })
}

if (roomMessagesUri !== null) {
    setInterval(function () {
        getMessages()
    }, 500)
}

function getMessages() {
    $.get(
        roomMessagesUri,
        function (response) {
            if (response.error) {
                handleMessage(response)
            } else if (response.length > 0) {
                response.forEach(function(message) {
                    handleMessage(message)
                })
            }
        }
    )
}

function addAchievement(achievement, message) {
    if (message === undefined) {
        message = null
    }

    const completed = achievement.stepsMatched === achievement.totalSteps

    let $achievementDiv = $('<div/>').addClass('achievement')

    if (completed) {
        $achievementDiv.addClass('completed')
    }

    let $achievementTag = $('<strong/>').html('<span class="trophy">🏆</span> ' + achievement.name + ' (' + achievement.stepsMatched + '/' + achievement.totalSteps + ')')
    let $achievementData = $('<div/>').html(
        '<em>' + achievement.description + '</em>'
    )

    if (message !== null) {
        $achievementData.html($achievementData.html() + '<br><br>' + message)
    }

    $achievementDiv.append($achievementTag)
    $achievementDiv.append($achievementData)

    $('.achievement-container').append($achievementDiv)

    if (completed) {
        setTimeout(function () {
            flash(100, 0.8)
        }, 125)
    }

    setTimeout(function () {
        $achievementDiv.animate({
            'opacity': 0,
            'height': 0,
        }, completed ? 1000 : 200, function () {
            $achievementDiv.remove()
        })
    }, completed ? 12000 : 8000)
}

function handleMessage(message) {
    // let json = JSON.parse(message);

    if (message.error !== undefined) {
        console.error('Error: ' + message.error)
        window.location = '/';
    }

    // redirect will only do anything if we're not already on the page
    if (message.type === 'redirect') {
        if (window.location !== message.location) {
            window.location = message.location
        }
        return
    }

    // redirectOrReload will _always_ make sure we end up on the requested page
    // BE CAREFUL -- this _can_ lead to an infinite loop
    if (message.type === 'redirect-or-reload') {
        window.location = message.location
        return
    }

    if (message.type === 'reload') {
        window.location = window.location
        return
    }

    if (message.type === 'achievement') {
        addAchievement(message.achievement, message.message)
        return
    }

    console.log('could not handle', message)
}