function showFullPost(uuid, username) {
    let defaultUrl = window.location.pathname;
    if(window.location.pathname.indexOf('user') === -1)
        defaultUrl += window.location.search;

    $.ajax({
        url: "/user/single_post_data/" + username + "/" + uuid,
        beforeSend: () => {
            const origin = encodeURI(btoa(window.location.href.split('/post')[0]));
            window.history.pushState('', '', '/user/' + username + '/post/' + uuid + '?o=' + origin);

            $('body').append(`
                <div class="modal fade postFullviewModal" role="dialog" tabindex="-1" id="postFullviewModal">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="text-center">
                                    <i class="fas fa-3x fa-spinner fa-spin"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);
            const modal = $('#postFullviewModal');

            modal.modal('show');

            modal.on('hidden.bs.modal', () => {
                $('.postFullviewModal').remove();
                window.history.replaceState('', '', defaultUrl);
            });
        },
        success: (data) => {
            $('#postFullviewModal .modal-body').empty().append(data);
            registerPostEvents();
        }
    });
}

function showFullscreenImage(imageURL) {
    $('body').append(`
        <div class="modal fade imageFullviewModal" role="dialog" tabindex="-1" id="imageFullviewModal">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <img src="${imageURL}" class="img-fluid rounded">
                </div>
            </div>
        </div>
    `);
    $('#imageFullviewModal').modal('show').on('hidden.bs.modal', function () {
        $(this).remove();
    });
    $('.postFullviewModal').modal('hide');
}

function registerPostEvents() {
    $('.action-btn.like-button').click((e) => {
        e.preventDefault();
        addPostLike($(e.currentTarget));
    });

    $('.action-btn.reply-button').click((e) => {
        e.preventDefault();
        const target = $(e.currentTarget);
        console.log(target, $('.postFullviewModal'));
        $('.postFullviewModal').modal('hide');
        $('#postModal #replyTo').val(target.data('uuid'));
        $('#postModal').modal('show');
    });

    $('.action-btn.more-options-button').click((e) => {
        e.preventDefault();

    });

    $('.post-item').click(function (e) {
        const target = e.target;

        if(target.tagName !== 'A' && target.tagName !== 'IMG' && target.tagName !== 'I' && !target.classList.contains('post-media')) {
            e.preventDefault();
            const uuid = $(this).data('uuid');
            const username = $(this).data('username');

            showFullPost(uuid, username);
        }
    });

    $('.post-media').click(function () {
        showFullscreenImage($(this).data('full-image'));
    });
}
registerPostEvents();

const pendingRequests = [];
function addPostLike(el) {
    const uuid = el.data('uuid');

    console.log(el, uuid);
    if(pendingRequests.indexOf(uuid) !== -1)
        return;

    const icon = $('.fa-heart', el);
    const text = $('span', el);
    const likeCount = parseInt(text.text());
    $.ajax({
        url: '/posts/addPostLike',
        method: 'post',
        data: {
            postUUID: uuid
        },
        success: (result) => {
            console.log(result);
            if(result.success) {
                text.text(result.likeCount);
                if(result.isLiked) {
                    icon.removeClass('far').addClass('fas');
                    icon.parent().addClass('active');
                } else {
                    icon.removeClass('fas').addClass('far');
                    icon.parent().removeClass('active');
                }
            } else {
                text.text(likeCount);
                $('body').append(`
                    <div class="alert alert-warning snackbar" id="message-uuid-${uuid}" role="alert">
                        ${result.message}
                    </div>
                `);
                icon.toggleClass('far').toggleClass('fas');
                icon.parent().toggleClass('active');
                setTimeout(() => {
                    $('#message-uuid-' + uuid).remove();
                }, 6000);
            }
            pendingRequests.splice(pendingRequests.indexOf(uuid), 1);
        },
        beforeSend: () => {
            pendingRequests.push(uuid);
            if(icon.hasClass('far')) {
                text.text(likeCount + 1);
            } else {
                text.text(likeCount - 1);
            }
            icon.toggleClass('far').toggleClass('fas');
            icon.parent().toggleClass('active');
        },
        error: console.log
    });
}

function copyToClipboard(text) {
    const $temp = $('<input>');
    $('body').append($temp);
    $temp.val(text).select();
    document.execCommand('copy');
    $temp.remove();
    $('.snackbar-container').append('<div class="alert alert-primary snackbar" role="alert">Text wurde in die Zwischenablage kopiert!</div>');
}

function openPostReportModal(uuid) {
    $('body').append(`
        <div class="modal fade" id="postReportModal" tabindex="-1" role="dialog" aria-labelledby="postReportLabel">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="postReportTitle">Post melden</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center" id="postReportBody">
                        <i class="fa fa-cog fa-spin fa-4x"></i>
                    </div>
                </div>
            </div>
        </div>
    `);

    $('#postReportModal').modal('show');
    $('#postReportModal').on('hidden.bs.modal', function () {
        $('#postReportModal').remove();
    });
    
    loadPostReportModal(uuid);
}

function loadPostReportModal(uuid) {
    $.ajax({
        url: '/posts/getReportModal',
        data: {
            uuid
        },
        success: (data) => {
            $('#postReportModal .modal-dialog').html(data);
            $('#postReportForm').submit((e) => {
                e.preventDefault();
                $('#postReportForm').slideUp();
                setTimeout(() => {
                    $('#postReportBody').append('<i class="fa fa-cog fa-4x fa-spin text-center"></i>');
                }, 200);
                submitReportForm(uuid, $('#postReportReason').val(), $('#postReportText').val());
            });
        }, error: () => {
            $('#postReportBody').html('<div class="alert alert-danger" role="alert">Dialog couldn\'t be loaded.');
        }
    });
}

function submitReportForm(postUuid, reportReason, reportText) {
    $.ajax({
        url: '/posts/reportPost',
        data: {
            uuid: postUuid,
            reason: reportReason,
            explanation: reportText
        },
        method: 'POST',
        success: (data) => {
            setTimeout(() => {
                $('#postReportBody').find('.fa').fadeOut();
            }, 500);
            console.log(data);
            if(data.success) {
                $('#postReportBody').append(`<div class="alert alert-success" role="alert" style="display: none;">${data.message}</div>`);
            } else {
                $('#postReportBody').append(`<div class="alert alert-danger" role="alert" style="display: none;">${data.message}</div>`);
                setTimeout(() => {
                    $('#postReportForm').slideDown();
                    $('#postReportBody').find('.alert').slideUp();
                    setTimeout(() => {
                        $('#postReportBody').find('.alert').remove();
                    }, 500);
                }, 2500);
            }
            setTimeout(() => {
                $('#postReportBody').find('.alert').slideDown();
            }, 1000);
        }
    })
}

function openDeletePostModal(uuid) {
    $('body').append(`
        <div class="modal fade" id="postDeleteModal" tabindex="-1" role="dialog" aria-labelledby="postReportLabel">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="postReportTitle">Post löschen</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center" id="postDeleteBody">
                        <i class="fa fa-cog fa-spin fa-4x"></i>
                    </div>
                </div>
            </div>
        </div>
    `);

    $('#postDeleteModal').modal('show');
    $('#postDeleteModal').on('hidden.bs.modal', function () {
       $('#postDeleteModal').remove();
    });

    loadDeletePostModal(uuid);
}

function loadDeletePostModal(uuid) {
    $.ajax({
        url: '/posts/getDeleteModal',
        data: {
            uuid
        },
        method: 'post',
        success: data => {
            $('#postReportTitle').text(data.title);
            $('#postDeleteBody').removeClass('text-center').html(data.body);
        }
    });
}

function deletePost(uuid) {
    $.ajax({
        url: '/posts/deletePost',
        method: 'post',
        data: { uuid },
        beforeSend: () => {
            $('#postDeleteBody').addClass('text-center').html('<i class="fa fa-cog fa-spin fa-4x"></i>');
        },
        success: data => {
            if(data.success) {
                $('#postDeleteBody').html('<div class="alert alert-success" role="alert"></div>');
            } else {
                $('#postDeleteBody').html('<div class="alert alert-danger" role="alert"></div>');
            }
            $('#postDeleteBody').removeClass('text-center').find('.alert').text(data.message);
            setTimeout(() => {
                $('#postDeleteModal').modal('hide');
                $(`.post-item[data-uuid=${uuid}]`).slideUp();
                setTimeout(() => {
                    $('#postDeleteModal').modal('dispose').remove();
                    $(`.post-item[data-uuid=${uuid}]`).remove();
                }, 500);
            }, 2000);
        }
    })
}