{% load static %}

<style type="text/css">
	.notification-thumbnail-image{
		height: 50px;
		width: 50px;
	}
	.chat-card:hover{
		cursor: pointer;
		background: #f2f2f2;
	}
	.chat-card{
		border-bottom: 1px solid var(--main-background-color);
	}
	.timestamp-text{
		color: var(--secondary-text-color);
	}
	.notification-chatroom-msg{
		color: var(--light-primary-text-color);
	}
	#id_notifications_loading_spinner{
		position: absolute;
		margin-top: 40px;
	}
	.chat-dropdown-header:hover{
		cursor: pointer;
		background: var(--main-background-color);
	}
	.chat-dropdown-header{
		color: var(--light-primary-text-color);
	}
</style>

<p class="d-none" id="id_chat_newest_timestamp"></p>
<p class="d-none" id="id_chat_page_number">1</p>

<script src="{% static 'collections/collections.min.js' %}"></script>

<script type="text/javascript">

setOnChatNotificationScrollListener()
	onChatNotificationsPaginationTriggerListener()

	const CHAT_NOTIFICATION_INTERVAL = 4000

	// Keep track of what notifications are currently visible to the user.
	var chatCachedNotifList = new List([])

    /*
		Add a header to the dropdown so users can visit /chat/
	*/
	function setupChatDropdownHeader(){
		var notificationContainer = document.getElementById("id_chat_notifications_container")

		if(notificationContainer != null){

			var div = document.createElement("div")
			div.classList.add("chat-dropdown-header", "d-flex", "flex-row", "justify-content-end", "m-auto", "align-items-end")
			div.addEventListener("click", function(e){
				var url = "{% url 'private-chat-room' %}"
				chatRedirect(url)
			})

			span1 = document.createElement("span")
			span1.classList.add("mr-2")
			span1.innerHTML = "Go to chat"
			div.appendChild(span1)

			span2 = document.createElement("span")
			span2.classList.add("material-icons", "mr-2")
			span2.innerHTML = "open_with"
			div.appendChild(span2)
			notificationContainer.appendChild(div)
		}
	}

	function chatRedirect(url){
		window.location.href = url
	}

	/*
		Display a card that says "You have no notifications"f
	*/
	function setupChatNotificationsMenu(){
		var notificationContainer = document.getElementById("id_chat_notifications_container")

		if(notificationContainer != null){
			setupChatDropdownHeader()

			card = createChatNotificationCard("id_no_chat_notifications")

			var div = document.createElement("div")
			div.classList.add("d-flex", "flex-row", "align-items-start")

			span = document.createElement("span")
			span.classList.add("align-items-start", "pt-1", "m-auto")
			span.innerHTML = "You have no notifications."
			div.appendChild(span)
			card.appendChild(div)
			notificationContainer.appendChild(card)

			//setChatNotificationsCount([])
		}
	}

	function onChatNotificationsPaginationTriggerListener(){
		window.onscroll = function(ev) {
			// because of rounding we need to add 2. 1 might be OK but I'm using 2.
			if ((window.innerHeight + window.scrollY + 2) >= document.body.scrollHeight) {
				getNextChatNotificationsPage()
			}
		};
	}

	/*
		Sets the scroll listener for when user scrolls to bottom of notification menu.
		It will retrieve the next page of results.
	*/
	function setOnChatNotificationScrollListener(){
		var menu = document.getElementById("id_chat_notifications_container")
		if(menu != null ){
			menu.addEventListener("scroll", function(e){

				if ((menu.scrollTop) >= (menu.scrollHeight - menu.offsetHeight)) {
					getNextChatNotificationsPage()
				}
			});
		}
		
	}

    /*
		The card that each notification sits in
	*/
	function createChatNotificationCard(cardId){
		var card = document.createElement("div")
		if(cardId != "undefined"){
			card.id = cardId
		}
		card.classList.add("d-flex", "flex-column", "align-items-start", "chat-card","p-4")
		return card
	}


    /*
		Retrieve the number of unread chat notifications. (This is the red dot in the notifications icon)
		Called every CHAT_NOTIFICATION_INTERVAL
	*/
	function getFirstChatNotificationsPage(){
		if("{{request.user.is_authenticated}}"){
			notificationSocket.send(JSON.stringify({
				"command": "get_chat_notifications",
				"page_number": "1",
			}));
			//getUnreadChatNotificationsCount()
		}
	}

	/*
		Received a payload from socket containing chat notifications.
		Called:
			1. When page loads
			2. pagination
	*/
    function handleChatNotificationsData(notifications, new_page_number){
    	if(notifications.length > 0){
    		clearNoChatNotificationsCard()
    		
    		notifications.forEach(notification => {

				submitChatNotificationToCache(notification)

				setChatNewestTimestamp(notification['timestamp'])
			})
			setChatPageNumber(new_page_number)
	    }
	}


	/*
		Sets the pagination page number.
	*/
	function setChatPageNumber(pageNumber){
		document.getElementById("id_chat_page_number").innerHTML = pageNumber
	}

	/*
		Retrieve the next page of chat notifications
		Called when the user scrolls to the bottom of the popup menu.
	*/
	function getNextChatNotificationsPage(){
		var pageNumber = document.getElementById("id_chat_page_number").innerHTML
		// -1 means exhausted or a query is currently in progress
		if("{{request.user.is_authenticated}}" && pageNumber != "-1"){
			notificationSocket.send(JSON.stringify({
				"command": "get_chat_notifications",
				"page_number": pageNumber,
			}));
		}
	}

	/*
		Keep track of the 'chat' newest notification in view. 
		When 'getNewChatNotifications' is called, it retrieves all the notifications newer than this date.
	*/
	function setChatNewestTimestamp(timestamp){
		element = document.getElementById("id_chat_newest_timestamp")
		current = element.innerHTML
		if(Date.parse(timestamp) > Date.parse(current)){
			element.innerHTML = timestamp
		}
		else if(current == "" || current == null || current == "undefined"){
			element.innerHTML = timestamp
		}
		console.log("setChatNewestTimestamp: " + element.innerHTML)
	}

	/*
		Remove the element that says "There are no notifications".
	*/
	function clearNoChatNotificationsCard(){
		var element = document.getElementById("id_no_chat_notifications")
		if(element != null && element != "undefined"){
			document.getElementById("id_chat_notifications_container").removeChild(element)
		}
	}


	/*
		Append to bottom. 
		Used for
			1. Page load
			2. pagination
			3. Refresh
		Called by 'handleChatNotificationsData' &  'refreshChatNotificationsData'
	*/
	function submitChatNotificationToCache(notification){
		var result = chatCachedNotifList.filter(function(n){ 
			return n['notification_id'] === notification['notification_id']
		})
		// This notification does not already exist in the list
		if(result.length == 0){
			chatCachedNotifList.push(notification)

			// append to bottom of list
			appendBottomChatNotification(notification)
		}
		// This notification already exists in the list
		else{
			// find the div and update it.
			refreshChatNotificationsList(notification)
		}
	}


	/*
		Search for the notification in the list using it's id. Then update its properties.
		I do not update the image_url since that makes the notifications "flicker".
	*/
	function refreshChatNotificationsList(notification){
		notificationContainer = document.getElementById("id_chat_notifications_container")

		if(notificationContainer != null){
			divs = notificationContainer.childNodes

			divs.forEach(function(card){
				// card
				if(card.id == ("id_notification_" + notification['notification_id'])){
					
					if(notification['notification_type'] == "UnreadChatRoomMessages"){
						refreshUnreadChatRoomMessagesCard(card, notification)
					}
				}
			})
		}
	}

	/*
		Refresh a refreshUnreadChatRoomMessagesCard card with current data
	*/
	function refreshUnreadChatRoomMessagesCard(card, notification){

card.childNodes.forEach(function(element){

	// DIV1
	if(element.id == ("id_chat_div1_" + notification['notification_id'])){
		element.childNodes.forEach(function(child){

			// DIV2
			if(child.id == ("id_chat_div2_" + notification['notification_id'])){
				child.childNodes.forEach(function(nextChild){
					if(nextChild.id == ("id_chat_title_" + notification['notification_id'])){
						// found title
						nextChild.innerHTML = notification['from']['title']
					}
					if(nextChild.id == ("id_chat_message_" + notification['notification_id'])){
						// found chat message
						if(notification['verb'].length > 50){
							nextChild.innerHTML = notification['verb'].slice(0, 50) + "..."
						}
						else{
							nextChild.innerHTML = notification['verb']
						}
					}
				})
			}
		})
	}

	// TIMESTAMP
	if (element.id == ("id_timestamp_" + notification['notification_id'])){
		element.innerHTML = notification['natural_timestamp']
	}
})
}


/*
		Received a payload from socket containing NEW chat notifications
		Called every CHAT_NOTIFICATION_INTERVAL
	*/
	function handleNewChatNotificationsData(notifications){
		if(notifications.length > 0){
			clearNoChatNotificationsCard()
			notifications.forEach(notification => {

				submitNewChatNotificationToCache(notification)

				setChatNewestTimestamp(notification['timestamp'])
			})
		}
	}

	/*
		Append to top OR update a div that already exists.
		Called by 'handleNewChatNotificationsData'
	*/
	function submitNewChatNotificationToCache(notification){
		var result = chatCachedNotifList.filter(function(n){ 
			return n['notification_id'] === notification['notification_id']
		})
		// This notification does not already exist in the list
		if(result.length == 0){
			chatCachedNotifList.push(notification)

			// append to top of list
			appendTopChatNotification(notification)
		}
		// This notification already exists in the list
		else{
			// find the div and update it.
			refreshChatNotificationsList(notification)
		}
	}


	/*
		Append a chat notification to the TOP of the list.
	*/
	function appendTopChatNotification(notification){
		switch(notification['notification_type']) {

			case "UnreadChatRoomMessages":
				chatNotificationContainer = document.getElementById("id_chat_notifications_container")
				card = createUnreadChatRoomMessagesElement(notification)

				if(chatNotificationContainer.childNodes.length > 2){
					// Append as the SECOND child. First child is the "go to chatroom" button
					// var index = chatNotificationContainer.childNodes.length - 1
					var index = 2
					chatNotificationContainer.insertBefore(card, chatNotificationContainer.childNodes[index]);
				}
				else {
					chatNotificationContainer.appendChild(card)
				}
				
				break;

			default:
				// code block
		}
	}

	/*
		Append a chat notification to the BOTTOM of the list.
	*/
	function appendBottomChatNotification(notification){

switch(notification['notification_type']) {

	case "UnreadChatRoomMessages":
		chatNotificationContainer = document.getElementById("id_chat_notifications_container")
		card = createUnreadChatRoomMessagesElement(notification)
		chatNotificationContainer.appendChild(card)
		break;

	default:
		// code block
}
}

/*
		Ex: "Hey what's up?"
		Ex: "This is a message from John. How are you..."
	*/
	function createUnreadChatRoomMessagesElement(notification){
		card = createChatNotificationCard()
		card.id = assignChatCardId(notification)
		card.addEventListener("click", function(){
			chatRedirect(notification['actions']['redirect_url'])
		})

		var div1 = document.createElement("div")
		div1.classList.add("d-flex", "flex-row", "align-items-start")
		div1.id = assignChatDiv1Id(notification)

		img = createChatProfileImageThumbnail(notification)
		img.id = assignChatImgId(notification)
		div1.appendChild(img)

		var div2 = document.createElement("div")
		div2.classList.add("d-flex", "flex-column")
		div2.id = assignChatDiv2Id(notification)

		var title = document.createElement("span")
		title.classList.add("align-items-start")
		title.innerHTML = notification['from']['title']
		title.id = assignChatTitleId(notification)
		div2.appendChild(title)

		var chatRoomMessage = document.createElement("span")
		chatRoomMessage.id = assignChatroomMessageId(notification)
		chatRoomMessage.classList.add("align-items-start", "pt-1", "small", "notification-chatroom-msg")
		if(notification['verb'].length > 50){
			chatRoomMessage.innerHTML = notification['verb'].slice(0, 50) + "..."
		}else{
			chatRoomMessage.innerHTML = notification['verb']
		}
		div2.appendChild(chatRoomMessage)
		div1.appendChild(div2)
		card.appendChild(div1)
		card.appendChild(createChatTimestampElement(notification))
		return card
	}


	/*
		Timestamp at the bottom of each notification card
	*/
	function createChatTimestampElement(notification){
		var timestamp = document.createElement("p")
		timestamp.classList.add("small", "pt-2", "timestamp-text")
		timestamp.innerHTML = notification['natural_timestamp']
		timestamp.id = assignChatTimestampId(notification)
		return timestamp
	}


	/*
		Circular image icon that can be in a notification card
	*/
	function createChatProfileImageThumbnail(notification){
		img = document.createElement("img")
		img.classList.add("notification-thumbnail-image", "img-fluid", "rounded-circle", "mr-2")
		img.src = notification['from']['image_url']
		img.id = assignChatImgId(notification['notification_id'])
		return img
	}

	/*
		The card that each notification sits in
	*/
	function createChatNotificationCard(cardId){
		var card = document.createElement("div")
		if(cardId != "undefined"){
			card.id = cardId
		}
		card.classList.add("d-flex", "flex-column", "align-items-start", "chat-card","p-4")
		return card
	}


	/*
		Retrieve any new chat notifications
		Called every CHAT_NOTIFICATION_INTERVAL seconds
	*/
	function getNewChatNotifications(){
		newestTimestamp = document.getElementById("id_chat_newest_timestamp").innerHTML
		console.log("NEWEST TS: " + newestTimestamp)
		if("{{request.user.is_authenticated}}"){
			notificationSocket.send(JSON.stringify({
				"command": "get_new_chat_notifications",
				"newest_timestamp": newestTimestamp,
			}));
		}
	}

	/*
		Start the functions that will be executed constantly
	*/
	function startChatNotificationService(){
		if("{{request.user.is_authenticated}}" == "True"){
			setInterval(getNewChatNotifications, CHAT_NOTIFICATION_INTERVAL)
			//setInterval(getUnreadChatNotificationsCount, CHAT_NOTIFICATION_INTERVAL)
		}
	}

	startChatNotificationService()



	function assignChatCardId(notification){
		return "id_notification_" + notification['notification_id']
	}

	/**
		Helpers for assigning ids to important elements.
	**/
	function assignChatDiv1Id(notification){
		return "id_chat_div1_" + notification['notification_id']
	}

	function assignChatImgId(notification){
		return "id_chat_img_" + notification['notification_id']
	}

	function assignChatDiv2Id(notification){
		return "id_chat_div2_" + notification['notification_id']
	}

	function assignChatTitleId(notification){
		return "id_chat_title_" + notification['notification_id']
	}

	function assignChatroomMessageId(notification){
		return "id_chat_message_" + notification['notification_id']
	}

	function assignChatTimestampId(notification){
		return "id_timestamp_" + notification['notification_id']
	}


	function setChatInitialTimestamp(){
		// ('%Y-%m-%d %H:%M:%S.%f')
		var today = new Date();
		var date = today.getFullYear() + "-01-01 01:00:00.000000"
		document.getElementById("id_chat_newest_timestamp").innerHTML = date
	}

	setChatInitialTimestamp()

</script>