// Store the title, to later append notifications count
var page_title = document.title;

var unread_on_load = 0;
var unread_new = 0;
var first_load = false;

// getNotifications by fetching json every X seconds
function getNotifications(){
	$.getJSON( "/notifications/", function( data ) {

		if (!first_load) {
			unread_on_load = data['items'].length;
			first_load = true;
		}

		var items = [];
		unread_new = 0;

		// Only if there's actual data
		if (data['items'][0]){

			// Loop through each item
			$.each(data['items'], function(i, no){

				// Increase the unread_new counter
				if (!no['is_read']){ unread_new++ };

				// Check if the current item has been read, to style it
				var is_read = no['is_read'] ? 'is_read' : '';

				var read_info = 'data-id="'+ no['_id'] + '" data-read="' + no['is_read'] + '"';

				// Notification list item
				var content = '<li class="nc-item ' + is_read +'" data-id="'+ no['_id'] + '">';

					// User's avatar
					content += '<div class="nc-avatar">';
						content += '<img ' + read_info + ' src="' + no['username_avatar'] + '"/> ';
					content += '</div>';

					// Text of the notification
					content += '<div class="nc-text">';

					// Username and action
					content += no['username'] + ' ' + no['action'] + ' ';

					// Object
					content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">';
					content += no['context_object_name'] + ' ';
					content += '</a> ';

					// Date
					content += '<span class="nc-date">';
					content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">';
					content += no['date'];
					content += '</a>';
					content += '</span>';

					// Read Toggle
					content += '<a id="'+no['_id']+'" href="/notifications/' + no['_id'] + '/read-toggle" class="nc-button nc-read_toggle">';
						if (no['is_read']){
							content += '<i title="Mark as Unread" class="pi pi-circle-dot"></i>';
						} else {
							content += '<i title="Mark as Read" class="pi pi-circle"></i>';
						};
					content += '</a>';

					// Subscription Toggle
					content += '<a href="/notifications/' + no['_id'] + '/subscription-toggle" class="nc-button nc-subscription_toggle">';
						if (no['is_subscribed']){
							content += '<i title="Turn Off Notifications" class="pi-toggle-on"></i>';
						} else {
							content += '<i title="Turn On Notifications" class="pi-toggle-off"></i>';
						};
					content += '</a>';

					content += '</div>';
				content += '</li>';

				items.push(content);
			}); // each

			if (unread_new > 0) {
				// Set page title, display notifications and set counter
				document.title = '(' + unread_new + ') ' + page_title;
				$('#notifications-count').addClass('bloom');
				$('#notifications-count').html('<span>' + unread_new + '</span>');
				$('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active');
			} else {
				document.title = page_title;
				$('#notifications-count').removeAttr('class');
				$('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');
			};

			checkPopNotification(
				data['items'][0]['_id'],
				data['items'][0]['username'],
				data['items'][0]['username_avatar'],
				data['items'][0]['action'],
				data['items'][0]['date'],
				data['items'][0]['context_object_name'],
				data['items'][0]['object_url']);

		} else {
			var content = '<li class="nc-item nc-item-empty">';
			content += 'No notifications... yet.';
			content += '</li>';

			items.push(content);
		}; // if items

		// Populate the list
		$('ul#notifications-list').html( items.join(''));
	})
	.done(function(){
		// clear the counter
		unread_on_load = unread_new;
	});
};


// Used when we click somewhere in the page
function hideNotifications(){
	$('#notifications').hide();
	$('#notifications-toggle').removeClass('active');
};

function popNotification(){

	// pop in!
	$("#notification-pop").addClass('in');

	// After 10s, add a class to make it pop out
	setTimeout(function(){
		$("#notification-pop").addClass('out');

		// And a second later, remove all classes
		setTimeout(function(){
			$("#notification-pop").removeAttr('class');
		}, 1000);

	}, 10000);

	// Set them the same so it doesn't pop up again
	unread_on_load = unread_new;
};


function checkPopNotification(id,username,username_avatar,action,date,context_object_name,object_url)
	{
		// If there's new content
		if (unread_new > unread_on_load){
			// Fill in the urls for redirect on click, and mark-read
			$("#notification-pop").attr('data-url', object_url);
			$("#notification-pop").attr('data-read-toggle', '/notifications/' + id + '/read-toggle');
			// The text in the pop
			var text = '<span class="nc-author">' + username + '</span> ';
			text += action + ' ';
			text += context_object_name + ' ';
			text += '<span class="nc-date">' + date + '</span>';

			// Fill the html
			$('#notification-pop .nc-text').html(text);
			$('#notification-pop .nc-avatar img').attr('src', username_avatar);

			// pop in!
			popNotification();
		};
	};


// Function to set #notifications flyout height and resize if needed
function notificationsResize(){
	var height = $(window).height() - 80;

	if ($('#notifications').height() > height){
		$('#notifications').css({
				'max-height' : height / 2,
				'overflow-y' : 'scroll'
			}
		);
	} else {
		$('#notifications').css({
				'max-height' : '1000%',
				'overflow-y' : 'initial'
			}
		);
	};
};


$(function() {
	// Click anywhere in the page to hide #notifications
	$(document).click(function () {
		hideNotifications();
	});
	// ...but clicking inside #notifications shouldn't hide itself
	$('#notifications').on('click', function (e) {
		e.stopPropagation();
	});

	// Toggle the #notifications flyout
	$('#notifications-toggle').on('click', function (e) {
		e.stopPropagation();

		$('#notifications').toggle();
		$(this).toggleClass("active");

		notificationsResize();

		// Hide other dropdowns
		$('nav .dropdown').removeClass('open');

		var navbarCollapse = $('nav.navbar-collapse');

		if ($(navbarCollapse).hasClass('in')){
			$(navbarCollapse).addClass('show-notifications').removeClass('in');
			$('.nav-notifications-icon').removeClass('pi-notifications-none').addClass('pi-cancel');
		} else {
			$(navbarCollapse).removeClass('show-notifications');
			$('.nav-notifications-icon').addClass('pi-notifications-none').removeClass('pi-cancel');
		}
	});

	// Hide flyout when clicking other dropdowns
	$('nav').on('click', '.dropdown', function (e) {
		$('#notifications').hide();
		$('#notifications-toggle').removeClass('active');
	});


	$('#notification-pop').on('click', function (e) {
		e.preventDefault();
		e.stopPropagation();

		var link_url = $(this).data('url');
		var read_url = $(this).data('read-toggle');

		$.get(read_url)
			.done(function () {
				window.location.href = link_url;
			});
	});


	// Read/Subscription Toggles
	$('ul#notifications-list').on('click', '.nc-button', function (e) {
		e.preventDefault();
		var nc = $(this);

		// Swap to spin icon while we wait for the response
		$('i', nc).addClass('spin');

		$.get($(nc).attr('href'))
			.done(function (data) {

				if ($(nc).hasClass('nc-read_toggle')) {
					if (data.data.is_read) {
						$('i', nc).removeClass('pi-circle').addClass('pi-circle-dot');
						$(nc).closest('.nc-item').addClass('is_read');
					} else {
						$('i', nc).removeClass('pi-circle-dot').addClass('pi-circle');
						$(nc).closest('.nc-item').removeClass('is_read');
					}
				}
				;

				if ($(nc).hasClass('nc-subscription_toggle')) {
					if (data.data.is_subscribed) {
						$('i', nc).removeClass('pi-toggle-on').addClass('pi-toggle-off');
					} else {
						$('i', nc).removeClass('pi-toggle-off').addClass('pi-toggle-on');
					}
				}
				;

				$('i', nc).removeClass('spin');
			});
	});


	// When clicking on links, toggle as read
	$('ul#notifications-list').on('click', '.nc-a', function (e) {
		e.preventDefault();

		var is_read = $(this).data('read');
		var link_url = $(this).attr('href');
		var read_url = '/notifications/' + $(this).data('id') + '/read-toggle';

		if (is_read) {
			window.location.href = link_url;
		} else {
			$.get(read_url)
				.done(function () {
					window.location.href = link_url;
				});
		}

	});


	// Mark All as Read
	$('#notifications-markallread').on('click', function (e) {
		e.preventDefault();

		$.get("/notifications/read-all");

		$('ul#notifications-list li.nc-item:not(.is_read)').each(function () {
			$(this).addClass('is_read');
		});

		document.title = page_title;
		$('#notifications-count').removeAttr('class');
		$('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');

		unread_on_load = unread_new;
	});
});


function getNotificationsLoop() {
	getNotifications();

	var getLoop = setTimeout(function () {
		getNotificationsLoop();
	}, 30000);
}

/* Notifications: Toastr Defaults */
toastr.options.showDuration = 50;
toastr.options.progressBar = true;
toastr.options.positionClass = 'toast-bottom-left';