const kinveyAppKey = 'kid_rkm22_5Xg';
const kinveyAppSecret = '28605befe77c4072930e3dbaa58f0b53';
const kinveyBaseUrl = 'https://baas.kinvey.com/';

$(function(){
    showHideNavigationLinks();
    $("section").hide();
    showView("AppHome");
    $("#infoBox").hide().on('click', function(){
        $('#infoBox').hide();
    });
    $("#errorBox").hide().on('click', function(){
        $("#errorBox").hide();
    });
    $("#loadingBox").hide();
    $("#linkMenuAppHome").on('click', function(){
        showView("AppHome");
    });
    $("#linkMenuLogin").on('click', function(){
        showView("Login");
    });
    $("#linkMenuRegister").on('click', function(){
        showView("Register");
    });
    $("#linkMenuUserHome").on('click', function(){
        showView("UserHome");
        $("#homeScreenUsername").text(sessionStorage.name);
    });
    $("#linkMenuMyMessages").on('click', function(){
        showView("MyMessages");
        loadMessages();
    });
    $("#linkMenuArchiveSent").on('click', function(){
        showView("ArchiveSent");
        loadSentMessages();
    });
    $("#linkMenuSendMessage").on('click', function(){
        showView("SendMessage");
        loadUsers();
    });
    $("#linkMenuLogout").on('click', function(){
        logout();
    });
    $("#formLogin").on('submit', function(e){
        e.preventDefault();
        login();
    });
    $("#formRegister").on('submit', function(e){
        e.preventDefault();
        register();
    });
    $("#formSendMessage").on('submit', function(e){
        e.preventDefault();
        sendMessage();
    });
    $("#linkUserHomeMyMessages").on('click', function(){
        showView("MyMessages");
        loadMessages();
    });
    $("#linkUserHomeSendMessage").on('click', function(){
        showView('SendMessage');
    });
    $("#linkUserHomeArchiveSent").on('click', function(){
        showView('ArchiveSent');
        loadSentMessages();
    });

}).on('click', ".buttonDeleteMessage", function(){
    deleteMessage($(this).parent().parent().attr('data-id'));
});


function showView(view) {
    $("section").hide();
    $("#view" + view).show();
}

function showHideNavigationLinks() {
    let loggedIn = sessionStorage.authToken;
    if (loggedIn == null) {
        $(".useronly").hide();
        $(".anonymous").show();
        $("#spanMenuLoggedInUser").hide();
    } else {
        $(".useronly").show();
        $(".anonymous").hide();
        $("#spanMenuLoggedInUser").show();
        $("#spanNavUsername").text(sessionStorage.name);

    }
}

function login() {
    let authBase64 = btoa(kinveyAppKey + ":" + kinveyAppSecret);
    let loginUrl = kinveyBaseUrl + "user/" + kinveyAppKey + "/login";
    let loginData = ({
        username: $("#loginUsername").val(),
        password: $("#loginPasswd").val()
    });
    $.ajax({
        method: "POST",
        url: loginUrl,
        data: loginData,
        headers: {"Authorization" : "Basic " + authBase64},
        success: loginSuccess,
        error: showAjaxError
    });
    function loginSuccess(data, status) {
        sessionStorage.authToken = data._kmd.authtoken;
        sessionStorage.username = data.username;
        sessionStorage.name = data.name;
        sessionStorage.uid = data._id;
        showInfo("Login successful.");
        showHideNavigationLinks();
    }
}

function logout() {
    let logoutUrl = kinveyBaseUrl + "user/" + kinveyAppKey + "/_logout";
    $.ajax({
        method: "POST",
        url: logoutUrl,
        headers: {"Authorization" : "Kinvey " + sessionStorage.authToken},
        success: logoutSuccess,
        error: showAjaxError
    });

    function logoutSuccess() {
        sessionStorage.clear();
        showHideNavigationLinks();
        showView("AppHome");
        showInfo("Logout successful.");
    }
}

function register() {
        let authBase64 = btoa(kinveyAppKey + ":" + kinveyAppSecret);
        let registerUrl = kinveyBaseUrl + "user/" + kinveyAppKey + "/";
        let registerData = ({
            username: $('#registerUsername').val(),
            password: $('#registerPasswd').val(),
            name: $('#registerName').val()
        });
        $.ajax({
            method: "POST",
            url: registerUrl,
            data: registerData,
            headers: {"Authorization": "Basic " + authBase64},
            success: registerSuccess,
            error: showAjaxError
        });
        function registerSuccess(data, status) {
            sessionStorage.authToken = data._kmd.authtoken;
            sessionStorage.username = data.username;
            sessionStorage.name = data.name;
            sessionStorage.uid = data._id;
            showInfo("User registration successful.");
            showHideNavigationLinks();
            showView("UserHome");
        }
}

function loadSentMessages() {
    let messagesUrl = kinveyBaseUrl + "appdata/" + kinveyAppKey + `/messages?query={"sender_username":"${sessionStorage.username}"}`;
    $.ajax({
        method: "GET",
        url: messagesUrl,
        headers: {"Authorization" : "Kinvey " + sessionStorage.authToken},
        success: drawSentMessages,
        error: showAjaxError
    });
    function drawSentMessages(data) {
        let table = $("<table>");
        let tableHeadings = $("<thead>");
        let tableRow = $("<tr>");
        tableRow.append($("<th>To</th>"));
        tableRow.append($("<th>Message</th>"));
        tableRow.append($("<th>Date Received</th>"));
        tableRow.append($("<th>Actions</th>"));
        tableHeadings.append(tableRow);

        let tableBody = $("<tbody>");

        for (let message of data) {
            let row = $("<tr data-id=>").attr('data-id', message._id);
            row.append($(`<td>`).text(message.recipient_username));
            row.append($(`<td>`).text(message.text));
            row.append($(`<td>${formatDate(message._kmd.ect)}</td>`));
            row.append($(`<td><input type="button" class="buttonDeleteMessage" value="Delete"></td>`));
            row.appendTo(tableBody);
        }
        table.append(tableHeadings);
        table.append(tableBody);
        $("#sentMessages").empty().append(table);
    }
}


function loadMessages() {
    let messagesUrl = kinveyBaseUrl + "appdata/" + kinveyAppKey + `/messages?query={"recipient_username":"${sessionStorage.username}"}`;
    $.ajax({
        method: "GET",
        url: messagesUrl,
        headers: {"Authorization" : "Kinvey " + sessionStorage.authToken},
        success: drawMessages,
        error: showAjaxError
    });
    function drawMessages(data) {
        let table = $("<table>");
        let tableHeadings = $("<thead>");
        let tableRow = $("<tr>");
        tableRow.append($("<th>From</th>"));
        tableRow.append($("<th>Message</th>"));
        tableRow.append($("<th>Date Received</th>"));
        tableHeadings.append(tableRow);

        let tableBody = $("<tbody>");

        for (let message of data) {
            let row = $("<tr data-id=>").attr('data-id', message._id);
            row.append($(`<td>`).text(formatSender(message.sender_name, message.sender_username)));
            row.append($(`<td>`).text(message.text));
            row.append($(`<td>${formatDate(message._kmd.ect)}</td>`));
            row.appendTo(tableBody);
        }
        table.append(tableHeadings);
        table.append(tableBody);
        $("#myMessages").empty().append(table);
    }
}


function deleteMessage(messageId) {
    let url = kinveyBaseUrl + "appdata/" + kinveyAppKey + "/messages/" + messageId;
    $.ajax({
        method: "DELETE",
        url: url,
        headers: {"Authorization" : "Kinvey " + sessionStorage.authToken},
        success: completeDeletion,
        error: showAjaxError
    });
    function completeDeletion() {
        showInfo("Message deleted.");
        showView("MyMessages");
        drawMessages();
    }
}

function sendMessage() {
    let url = kinveyBaseUrl + "appdata/" + kinveyAppKey + "/messages";
    let data = {
        sender_username: sessionStorage.username,
        sender_name: sessionStorage.name,
        recipient_username: $("#msgRecipientUsername").val(),
        text: $("#msgText").val()
    };
    let headers = {"Authorization" : "Kinvey " + sessionStorage.authToken};
    $.ajax({
        method: "POST",
        url: url,
        data: data,
        headers: headers,
        success: messageSent,
        error: showAjaxError
    });
    function messageSent() {
        showInfo("Message sent.");
        showView("ArchiveSent");
    }

}

function loadUsers() {
    let url = kinveyBaseUrl + "user/" + kinveyAppKey;
    $.ajax({
        method: "GET",
        url: url,
        headers: {"Authorization": "Kinvey " + sessionStorage.authToken},
        success: continueLoading,
        error: showAjaxError
    });

    function continueLoading(data) {
        $("#msgRecipientUsername").empty();
        for (let user of data) {
            $("#msgRecipientUsername").append(`<option value="${user.username}">${formatSender(user.name, user.username)}</option>`);
        }
    }
}

function formatDate(dateISO8601) {
    let date = new Date(dateISO8601);
    if (Number.isNaN(date.getDate()))
        return '';
    return date.getDate() + '.' + padZeros(date.getMonth() + 1) +
        "." + date.getFullYear() + ' ' + date.getHours() + ':' +
        padZeros(date.getMinutes()) + ':' + padZeros(date.getSeconds());

    function padZeros(num) {
        return ('0' + num).slice(-2);
    }
}

function formatSender(name, username) {
    if (!name)
        return username;
    else
        return username + ' (' + name + ')';
}


function showAjaxError(data, status) {
    let errorMsg = '';
    if (typeof(data.readyState) != "undefined" && data.readyState == 0) {
        errorMsg = "Network connection problem. Please check your connection!"
    }
    else if (data.responseJSON && data.responseJSON.description) {
        errorMsg = data.responseJSON.description;
    } else {
        errorMsg = "Error: " + JSON.stringify(data)
    }
    $('#errorBox').text(errorMsg).fadeIn(300);
}

function showInfo(messageText) {
    $('#infoBox').text(messageText).fadeIn(300).delay(3000).fadeOut(300);
}

$(document)
    .ajaxStart(function(){
    $("#loadingBox").fadeIn(300);
    })
    .ajaxStop(function() {
        $("#loadingBox").fadeOut(300);
    });