$(document).ready(function() {
    var chatform = $('#sendChatMessage');
    var uploadForm = $('#uploadFile');

    chatform.bind('submit', function(event) {
        event.preventDefault(); // Prevent page reload
        var msg = $("#chatMessage").val();

        console.log("Submitting message:", msg);

        var ajax_params = {
            url: '/chat/sendMessage',
            type: 'POST',
            data: { chatMessage: msg },
            success: function(response) {
                console.log("Message sent successfully:", response);
                $("#chatMessage").val("");
            },
            error: function(xhr, status, error) {
                console.error("Error sending message:", error, status, xhr);
            },
            complete: function() {
                console.log("AJAX request complete");
            }
        };

        $.ajax(ajax_params);
        return false;
    });

    uploadForm.bind('submit', function(event) {
        event.preventDefault(); // Prevent page reload

        var formData = new FormData(this); // Create FormData object

        $.ajax({
            url: '/chat/uploadFile',
            type: 'POST',
            data: formData,
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(response) {
                console.log("File uploaded successfully:", response);
                $("#file").val("");
            },
            error: function(xhr, status, error) {
                console.error("Error uploading file:", error, status, xhr);
            },
            complete: function() {
                console.log("AJAX request complete");
            }
        });

        return false;
    });

    const eventSource = new EventSource('/chat/getMessageEvents');
    eventSource.onmessage = function( event ) {
        const message = JSON.parse( event.data );

        var userPopup = "<div class='media'>" +
            "<span class='pull-left'>" +
                "<img class='media-object avatar-round-40' src='/"+message.avatar+"' alt=''>" +
            "</span>" +
            "<div class='media-body'>" +
                "<h5 class='media-heading'>" +
                    "<strong>"+message.submittedByName+"</strong>" +
                "</h5>" +
                "<a href='/home/profile/"+message.submittedByName+"' class='btn btn-sm btn-primary' role='button'><i class='glyphicon glyphicon-open'></i> View Profile</a>" +
            "</div>" +
        "</div>";

        $("#chatMessages").append(
            "<span class='chat-time'>" +
                new Date(message.submittedAt * 1000).toLocaleString('en-US', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }) +
                // new Date(message.submittedAt * 1000).toLocaleString() +
            "</span> " +
            '<a tabindex="0" role="button" data-toggle="popover" data-html="true" data-trigger="focus" title="'+message.submittedByName+'" data-content="'+userPopup+'">' +
                message.submittedByName +
            '</a> ' +
            message.chatMessage + "<br>"
        );
        $("[data-toggle=popover]").popover();
        $("#chatMessages").scrollTop($("#chatMessages")[0].scrollHeight);
    };

    eventSource.onerror = function(event) {
        console.error('EventSource failed:', event);
    };

    window.addEventListener('beforeunload', function() {
        eventSource.close();
    });

    window.addEventListener('unload', function() {
        eventSource.close();
    });

    // function getUserProfile( id ) {
    //     var ajax_params = {
    //         url: '/api/users/find/' + id,
    //         type: 'GET',
    //         success: function(response) {
    //             console.log("User retrieved:", response);
    //             $("#chatMessage").val("");
    //         },
    //         error: function(xhr, status, error) {
    //             console.error("Error retrieved user:", error, status, xhr);
    //         },
    //         complete: function() {
    //             console.log("AJAX request complete");
    //         }
    //     };
    //     $.ajax(ajax_params);
    // }
});