$(document).ready(function () {
    $.ajax({
        url: "/blog/getComments",
        data: {
            url: window.location.pathname
        },
        beforeSend: function () {
            $("#comment-list").html("<h2><i class='fa fa-cog fa-spin'></i> Loading Comments</h2>");
        },
        success: function (data) {
            $("#comment-list").html(data);
        },
        error: function () {
            $("#comment-list").html("<div class='alert alert-danger' role='alert'><b>Error!</b> Couldn't load the comments for this posts caused by an unkown error! Please try again later or contact the admin for help.</div>");
        }
    });

    $('.blog .info-box').each((el) => {
    });
});

$('#commentForm').submit(function (event) {
    event.preventDefault();
    addComment();
});

var addComment = function () {
    if ($('#commentField').val() !== '') {
        var comment = $('#commentField').val();
        comment.replace("\n", "<br>");

        var item;
        $.ajax({
            url: "/blog/comment",
            method: 'POST',
            data: {
                url: window.location.pathname,
                comment: comment
            },
            beforeSend: function () {
                item = $(`
                <li>
                    <div class="user-post-item">
                        <div class="item-avatar-container">
                            <div class="loadingSpinner"></div>
                        </div>
                        <h3 class="item-user">
                            <a href="#">
                                Du
                            </a>
                        </h3>
                        <h4 class="item-meta">
                            jetzt gerade
                        </h4>
                        <p class="item-content">
                            ${comment}
                        </p>
                        <div class="item-actions">
                            <a href="#" class="item-btn" data-toggle="tooltip" data-placement="top" title="Antworten">
                                <i class="far fa-comment"></i>
                                <span>0</span>
                            </a>
                            <a href="#" class="item-btn" data-toggle="tooltip" data-placement="top" title="Gefällt mir">
                                <i class="far fa-heart"></i>
                                <span>0</span>
                            </a>
                            <div class="item-btn dropdown">
                                <a href="#" class="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-h"></i>
                                </a>
                                <div class="dropdown-menu"></div>
                            </div>
                        </div>
                    </div>
                </li>
                `);

                $('#comment-list').prepend(item);
                $('#commentField').attr('disabled', '');
                $('#addComment').attr('disabled', '');
            },
            success: function (data) {
                console.log(data);
                if (data.success) {
                    $('#commentField').val('');

                    addSnackbar('success', 'Dein Kommentar wurde erfolgreich veröffentlicht!');

                    item
                        .find('.item-avatar').attr('src', data.content.profilePicture).attr('alt', data.content.username)
                        .find('.item-user a').attr('href', data.content.profileUrl).text(data.content.displayname);

                    item.find('.item-avatar-container .loadingSpinner').fadeOut();

                    setTimeout(() => {
                        item.find('.item-avatar-container .loadingSpinner').remove();
                        item.find('.item-avatar-container')
                            .addClass('text-center')
                            .append('<i class="fa fa-check" style="display:none"></i>')
                            .find('.fa').fadeIn();
                    }, 500);

                    setTimeout(() => {
                        item.find('.item-avatar-container .fa').fadeOut();
                    }, 1500);

                    setTimeout(() => {
                        item.find('.item-avatar-container')
                            .empty()
                            .removeClass('text-center')
                            .append(`<img src="${data.content.profilePicture}" class="item-avatar" style="display:none">`)
                            .find('img').fadeIn();
                    }, 2000);

                    // $('.loading-container', item).css('background-color', '#28b62c');
                    // $('.loading-container i', item)
                    //     .removeClass('fa-cog').removeClass('fa-spin')
                    //     .addClass('fa-check').css('color', '#fff');
                    // $('.content h3 small', item).hide()
                    //     .html(`von <a href="/user/${data.content.username}" target="_blank">${data.content.displayname}</a> / ${data.content.date}`).fadeIn();
                    // $('.loading-container', item).delay(2000).fadeOut(2000);
                    // $('.comment-well', item).prepend(`<img src="${data.content.profilePic}" style="display:none">`);
                    // $('.comment-well img', item).fadeIn(2000);
                    // $('.image-placeholder', item).remove();
                    // wait(8000);
                    // $('.content', item).removeClass('small');
                    // $('.comment-count').text(parseInt($('.comment-count').text()) + 1);
                } else {
                    addSnackbar('danger', data.message);
                }
            },
            error: function (data) {
                console.log(data);
                $('#notice-container').html('<div class="alert alert-danger" role="alert"><b>Error:</b> Comment couldn\'t be sent caused by an unkown error! Please try again later or contact the admin to get help!</div>');
                $('div.loading-container', item).css('background-color', '#ff4136');
                $('div.loading-container i', item).removeClass('fa-cog').removeClass('fa-spin').addClass('fa-exclamation').css("color", '#fff');
                $(item).delay(3000).fadeOut(2000);
            },
            complete: function () {
                $('#commentField').removeAttr('disabled');
                $('#addComment').html('Kommentar senden').removeAttr('disabled');
            }
        });
    }
};

function wait(ms) {
    var start = new Date().getTime();
    var end = start;
    while (end < start + ms) {
        end = new Date().getTime();
    }
}

function likeDislike(postID) {
    $.ajax({
        type: "POST",
        url: "/blog/like",
        data: {
            postID: postID
        },
        success: function (data) {
            if (data == "no-user") {
                $('#loginModal').modal('show');
            } else {
                data = data.split(":");

                $('.like-toggle-icon').toggleClass('-checked');
                $('.like-count').text(data[1]);
            }
        }
    });
}