jQuery.fn.inlineConfirm = function() {
    return this.on('click', function(event) {
        sessionID = $(this).data('sessionid');
//        event.preventDefault();
        $(this).off('click').parent().empty().append(
            $('<button>', {
                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_yes'],
                class: 'bttn-simple bttn-xs bttn-primary sessiondeleteconfirm',
                style: 'margin-right: 3px;',
                'data-translation': 'button_yes',
                'data-sessionid': sessionID
            })).append(
            $('<button>', {
                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_no'],
                class: 'bttn-simple bttn-xs bttn-primary sessiondeletecancel',
                'data-translation': 'button_no',
                'data-sessionid': sessionID
            })
        );
    });
};

$(document).ready(function(){
    // Initialize the editable-table functionality
    $('#usertable').editableTableWidget();

    // Prevent clicking *through* popup-screens
    $('#sessions').click(function(event) {
        event.stopPropagation();
    });
    
    // Add eventhandlers to buttons
    $('#usertable button.session').click(function() {
        event.stopPropagation();
        $('#sessions tbody').empty();
        $('#sessions').fadeToggle();

        $.post("lucidAuth.manage.php", {
			do: "retrievesessions",
			userid: $(this).closest('tr').find('td:nth-child(1)').data('userid')
		})
		.done(function(data,_status) {
			if (data.Result === 'Success') {
                var Sessions = JSON.parse(data.UserSessions);
                for (var i = 0; i < data.SessionCount; i++) {
                    try {
                        var fingerPrint = JSON.parse(atob(Sessions[i]['fp']));
                        var sessionDetails = '<img class="browsericon" src="/images/' + fingerPrint['browser'] + '_256x256.png">';
                        sessionDetails += fingerPrint['browser'] + ' -- ' + fingerPrint['platform'];
                        sessionDetails += '<br>' + fingerPrint['city'] + ' (' + fingerPrint['countrycode'] + ')';
                    } catch(e) {
                        // Do nothing
                    } 
                    $('#sessiontable tbody').append($('<tr>')
                        .append($('<td>', {
                            text: new Date(Sessions[i]['iat'] * 1000).toLocaleString('en-GB')
                        }))
                        .append($('<td>', {
                            text: Sessions[i]['iss']
                        }))
                        .append($('<td>', {
                            html: sessionDetails ? sessionDetails : ''
                        }))
                        .append($('<td>', {
                            html: $('<button>', {
                                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'],
                                class: 'bttn-simple bttn-xs bttn-primary sessiondelete',
                                'data-translation': 'button_delete',
                                'data-sessionid': Sessions[i]['tid']})
                        }))
                    );
                }
                $('#sessiontable .sessiondelete').inlineConfirm();
			} else {
			}
		});
    });
    $('#usertable button.delete').click(function() {
        $(this).closest('tr').addClass('removed');
    });

    $('#btnnewuser').click(function() {
        // Create a new user; generate pseudo-random username
        var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');

        // Add new user to the interface
        //   (new `<tr>` in `<table id="usertable">`)
        $('#usertable tbody').append($('<tr>', {class: 'new'})
            .append($('<td>', {
                text: newUser
            }))
            .append($('<td>', {
                text: 'User'
            }))
            .append($('<td>', {
                class: 'immutable',
                html: '<button class="bttn-simple bttn-xs bttn-primary disabled" data-translation="button_sessions" disabled="true">' +
                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_sessions'] + '</button>&nbsp;' +
                    '<button class="bttn-simple bttn-xs bttn-primary delete" data-translation="button_delete">' +
                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'] +
                    '</button>'
            }))
        );
        // Call `editableTableWidget()` again to include the newly added `<tr>`
        //   To prevent recreating multiple new editors; reference the already existing `<input>`
        $('#usertable').editableTableWidget({editor: $('#editor')});
        // Add eventhandlers to buttons of newly added `<tr>`
        $('#usertable .new button.session').unbind().click(function() {
            console.log('New user, unlikely to have sessions already, lets do nothing for now');
        });
        $('#usertable .new button.delete').unbind().click(function() {
            $(this).closest('tr').remove();
        });
    });

    $('#btnsave').click(function() {
        var newEntries = [];
        $('#usertable .new').each(function() {
            newEntries.push({
                'userName': $(this).find('td:nth-child(1)').text(),
                'roleName': $(this).find('td:nth-child(2)').text()
            });
        });
        var removedEntries = [];
        $('#usertable .removed').each(function() {
            removedEntries.push({
                'userId':   $(this).find('td:nth-child(1)').data('userid'),
                'userName': $(this).find('td:nth-child(1)').text(),
                'roleName': $(this).find('td:nth-child(2)').text()
            });
        });

console.log({'new': newEntries, 'removed': removedEntries});

/*        $.get("psworker.php", {
			do: "mutate",
			mutations: {
				new: newEntries,
				removed: removedEntries
			}
		})*/
    });

    $('#btncancel').click(function() {
        window.location.reload();
    });

    $('#linklogout').click(function() {
        console.log('Logging out!');
    });

   	if (localStorage.getItem('theme') !== null) {
		$('#theme').addClass(localStorage.getItem('theme'));
	}

	$('.logo .sub').click(function(event) {
		var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];

		if (event.ctrlKey) {
			var selectedTheme = classes[~~(Math.random()*classes.length)];

			$('#theme').removeClass(classes.join(' ')).addClass(selectedTheme);
			localStorage.setItem('theme', selectedTheme);
		}
		if (event.altKey) {
			$('#theme').removeClass(classes.join(' '));
			localStorage.removeItem('theme');
		}
	});

});

$(document).click(function () {
    $('#sessions').fadeOut();
});