{% extends 'base.html' %}

{% block title %}Message{% endblock %}
{% load static %}
{% block content %}

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

  <style type="text/css">
    .chat-log {
      height: 500px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px;
      background-color: #fff;
      font-size: 0.9em;
      flex-direction: column-reverse;
    }
    .chat-message-input-container{
      outline: none;
      box-shadow: none;
    }
    .chat-message-input{
      outline: none;
      border: 1px solid #fff;
      border-top: 2px solid var(--main-background-color);
      
    }
    .message-container{
      margin-top: 10px;
      justify-content: start;
    }
    .username-span{
      font-weight: 600;
      margin-top: 0px;
      margin-bottom: auto;
      margin-left: 5px;
      margin-right: 5px;
    }
    .friend-message-span{
      font-weight: 380;
      margin-top: 0px;
      margin-bottom: auto;
      margin-left: 5px;
      margin-right: 5px;
      font-size: 0.6em;
      color: var(--light-primary-text-color);
    }
    .timestamp-span{
      font-weight: 400;
      font-size: 0.8em;
      color: var(--secondary-text-color);
    }
    .timestamp-span:hover{
      cursor: pointer;
    }
    .msg-p{
      font-weight: 450;
      margin-top: 5px;
      margin-bottom: auto;
      margin-left: 5px;
      margin-right: 5px;
      white-space: normal;
      -ms-word-break: break-all;
      word-break: break-all;
    }
    .profile-image{
      width: 33px;
      height: 33px;
      margin-top: 0px;
      margin-bottom: auto;
    }
    .profile-image-small{
      width: 25px;
      height: 25px;
      margin-top: 0px;
      margin-bottom: auto;
      margin-right: 5px;
    }
    .profile-image:hover{
      cursor: pointer;
    }
    .profile-image-small:hover{
      cursor: pointer;
    }
    .username-span:hover{
      cursor: pointer;
    }
    .material-icons:hover{
      cursor: pointer;
    }
    .card {
      border-radius: 12px;
    }
    
    #id_chatroom_loading_spinner{
      position: absolute;
    }
    .friend-container:hover{
      background: var(--main-background-color);
      cursor: pointer;
    }
    .friends-list-container{
      max-height: 500px;
      overflow-y: scroll;
    }
	#id_user_info_container{
		text-decoration: none;

	}
	#id_user_info_container #id_other_username{
		margin-left: 10px;
	}
	
	.chat-log-msg{
		background-color: blue;
	}
  </style>

<br>
    <div class="row">
      <div class="col-3">
        {% include 'snippets/left-menu.html' %}
      </div>
      <div class="col-6">
		<h1>My Messages</h1>
        <div class="card">
          <div class="d-flex flex-row align-items-center card-header" id="id_room_title">
            <a class="d-flex flex-row" target="_blank" id="id_user_info_container">
              <img class="profile-image rounded-circle img-fluid" id="id_other_user_profile_image" src="{% static 'img/profile_image.png' %}">
              <h3 class="ml-4" id="id_other_username"></h3>
            </a>
            
            </div>

            <div class="card-body p-1">
              <div class="d-flex flex-column" id="id_chat_log_container">
              
                <div class="d-flex flex-row justify-content-center" id="id_chatroom_loading_spinner_container">
                  <div class="spinner-border text-primary"  id="id_chatroom_loading_spinner" role="status"  style="display: none; ">
                    <span class="sr-only">Loading...</span>
                  </div>
                </div>
                <div class="d-flex chat-log" id="id_chat_log">
                  
                </div>
                <span class="{% if not debug %}d-none{% endif %} page-number" id="id_page_number">1</span>
                
                <div class="d-flex flex-row chat-message-input-container">
                  <textarea class="flex-grow-1 chat-message-input" id="id_chat_message_input"></textarea>
                  <button class="btn btn-primary chat-message-submit-button">
                    <span id="id_chat_message_submit" class="material-icons">send
                    </span>
                  </button>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="col-3">
        <div class="card">
          <div class="d-flex flex-row align-items-center card-header">
            <h3 >Friends</h3>
          </div>
          <div class="card-body p-1">	
            <div class="d-flex flex-column friends-list-container ">
              {% for x in m_and_f %}
              <div class="d-flex flex-row p-2 friend-container flex-grow-1" onclick="onSelectFriend('{{x.friend.id}}')" id="id_friend_container_{{x.friend.id}}">
                <img class="profile-image rounded-circle img-fluid" id="id_friend_img_{{x.friend.id}}" src="{{ x.friend.profile_image.url }}" >
                <div class="d-flex flex-column">
                  <span class="username-span">{{x.friend.username}}</span>
                  <span class="friend-message-span">{{x.message|truncatechars:20}}</span>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Client Error MODAL -->
<button type="button" id="id_trigger_client_error_modal" class="d-none btn btn-primary" data-toggle="modal" data-target="#id_client_error_modal">
</button>
<div class="modal fade" id="id_client_error_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Socket Client Error</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="id_client_error_modal_body">Something went wrong.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="id_client_error_modal_close_btn">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var url = window.location.origin
  var chatSocket = null
	var roomId = null

  onstart()

	function onstart(){
    {% if room %}
			if("{{room.user1}}" == "{{request.user}}"){
				onSelectFriend("{{room.user2.id}}")
			}
			else{
				onSelectFriend("{{room.user1.id}}")
			}
		{% else %}
			{% if m_and_f %}
				onSelectFriend("{{m_and_f.0.friend.id}}")
			{% endif %}
		{% endif %}

		{% for x in m_and_f %}
		preloadImage("{{ x.friend.profile_image.url|safe }}", "id_friend_img_{{x.friend.id}}")
		{% endfor %}
  }

  function onSelectFriend(userid){
		createOrReturnPrivateChat(userid)
		clearHighlightedFriend()
		highlightFriend(userid)
	}

  function closeWebsocket(){
		if(chatSocket != null){
			chatSocket.close()
			chatSocket = null
			clearChatLog()
			setPageNumber("1")
			disableChatLogScrollListener()
		}
	}


  function setupWebSocket(room_id){
    //console.log("setupWebSocket: " + room_id)
    roomId = room_id

    // close previous socket if one is open
		closeWebsocket()

    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
		{% if debug_mode %}
			var ws_path = ws_scheme + '://' + window.location.host + "/chat/" + roomId + "/"; // development
		{% else %}
			var ws_path = ws_scheme + '://' + window.location.host + ":8001/chat" + roomId + "/"; // production
		{% endif %}
		chatSocket = new WebSocket(ws_path);
    //console.log(chatSocket)

    // Handle incoming messages
		chatSocket.onmessage = function(message) {
      var data = JSON.parse(message.data);
      console.log(data)

      // display the progress bar?
		  displayChatroomLoadingSpinner(data.display_progress_bar)

      if(data.join){
			console.log("Joining public room " + data.join)
			getUserInfo()
			getRoomChatMessages()
			enableChatLogScrollListener()
		}

      if(data.leave){
			console.log("Leaving public room " + data.leave)
		}

		if(data.user_info){
			handleUserInfoPayload(data.user_info)
		}
      

      // Handle getting a message
		if (data.msg_type == 0 || data.msg_type == 1 || data.msg_type == 2) {
				appendChatMessage(data, false, true)
			}

      // new payload of messages coming in from backend
			if(data.messages_payload){
				handleMessagesPayload(data.messages, data.new_page_number)
			}

		

    }

    chatSocket.onclose = function(e) {
		console.error('Private ChatSocket closed.');
	  };

    chatSocket.onOpen = function(e){
      console.log("Private ChatSocket onOpen", e)
    }

    chatSocket.onerror = function(e){
          console.log('Private ChatSocket error', e)
      }

    if (chatSocket.readyState == WebSocket.OPEN) {
    	console.log("Private ChatSocket OPEN")
    } else if (chatSocket.readyState == WebSocket.CONNECTING){
        console.log("Private ChatSocket connecting..")
    }

    chatSocket.addEventListener("open", function(e){
      console.log("Private ChatSocket OPEN")
      // join chat room
      if("{{request.user.is_authenticated}}"){
        chatSocket.send(JSON.stringify({
          "command": "join",
          "room": roomId
        }));
      }
	})
  }


  function getUserInfo(){
		chatSocket.send(JSON.stringify({
			"command": "get_user_info",
			"room_id": roomId
		}))
	}

  function clearChatLog(){
		document.getElementById("id_chat_log").innerHTML = ""
		console.log("clear chat")
	}


	document.getElementById('id_chat_message_input').focus();
	document.getElementById('id_chat_message_input').onkeyup = function(e) {
		if (e.keyCode === 13 && e.shiftKey) {  // enter + return
			// Handled automatically by textarea
		}
		else if(e.keyCode === 13 && !e.shiftKey){ // enter + !return
			document.getElementById('id_chat_message_submit').click();
		}
	};


  document.getElementById('id_chat_message_submit').onclick = function(e) {
		const messageInputDom = document.getElementById('id_chat_message_input');
		const message = messageInputDom.value;
		chatSocket.send(JSON.stringify({
			"command": "send",
			"message": message,
			"room": roomId
		}));
		messageInputDom.value = '';
	};


  function appendChatMessage(data, maintainPosition, isNewMessage){
		messageType = data['msg_type']
		msg_id = data['msg_id']
		message = data['message']
		uName = data['username']
		user_id = data['user_id']
		profile_image = data['profile_image']
		timestamp = data['natural_timestamp']
		//user = data['user']
		//console.log("append chat message: " + user)
		
		var msg = "";
		var username = ""

		// determine what type of msg it is
		switch (messageType) {
			case 0:
				// new chatroom msg
				username = uName + ": "
				msg = message + '\n'
				createChatMessageElement(msg, msg_id, username, profile_image, user_id, timestamp, maintainPosition, isNewMessage)
				break;
			case 1:
				// User joined room
				createConnectedDisconnectedElement(message, msg_id, profile_image, user_id)
				break;
			case 2:
				// User left room
				createConnectedDisconnectedElement(message, msg_id, profile_image, user_id)
				break;
			default:
				console.log("Unsupported message type!");
				return;
		}

  }


  /*
		Build a new ChatMessage element and append to the list
	*/
	function createChatMessageElement(msg, msg_id, username, profile_image, user_id, timestamp, maintainPosition, isNewMessage){
    var chatLog = document.getElementById("id_chat_log")

		var newMessageDiv = document.createElement("div")
		newMessageDiv.classList.add("d-flex")
		newMessageDiv.classList.add("flex-row")
		newMessageDiv.classList.add("message-container")
		//newMessageDiv.classList.add("w-50")
		//newMessageDiv.classList.add("rounded")
		//newMessageDiv.classList.add("p-1")
		//newMessageDiv.classList.add("chat-log-msg")

    var profileImage = document.createElement("img")
		profileImage.addEventListener("click", function(e){
			selectUser(user_id)
		})
    profileImage.classList.add("profile-image")
		profileImage.classList.add("rounded-circle")
		profileImage.classList.add("img-fluid")
		profileImage.src = "{% static 'img/profile_image.png' %}"
		var profile_image_id = "id_profile_image_" + msg_id
		profileImage.id = profile_image_id
		newMessageDiv.appendChild(profileImage)

    var div1 = document.createElement("div")
		div1.classList.add("d-flex")
		div1.classList.add("flex-column")

		var div2 = document.createElement("div")
		div2.classList.add("d-flex")
		div2.classList.add("flex-row")

		var usernameSpan = document.createElement("span")
		usernameSpan.innerHTML = username
		usernameSpan.classList.add("username-span")
		usernameSpan.addEventListener("click", function(e){
			selectUser(user_id)
		})
		div2.appendChild(usernameSpan)

    var timestampSpan = document.createElement("span")
		timestampSpan.innerHTML = timestamp
		timestampSpan.classList.add("timestamp-span")
		timestampSpan.classList.add("d-flex")
		timestampSpan.classList.add("align-items-center")
		timestampSpan.addEventListener("click", function(e){
			selectUser(user_id)
		})
		div2.appendChild(timestampSpan)

		div1.appendChild(div2)

    var msgP = document.createElement("p")
		msgP.innerHTML = validateText(msg)
		msgP.classList.add("msg-p")
		div1.appendChild(msgP)

		newMessageDiv.appendChild(div1)

		if(isNewMessage){
			chatLog.insertBefore(newMessageDiv, chatLog.firstChild)
		}
		else{
			chatLog.appendChild(newMessageDiv)
		}
		
		if(!maintainPosition){
			chatLog.scrollTop = chatLog.scrollHeight
		}

		preloadImage(profile_image, profile_image_id)

  }

  function createConnectedDisconnectedElement(msg, msd_id, profile_image, user_id){
		var chatLog = document.getElementById("id_chat_log")

		var newMessageDiv = document.createElement("div")
		newMessageDiv.classList.add("d-flex")
		newMessageDiv.classList.add("flex-row")
		newMessageDiv.classList.add("message-container")

		var profileImage = document.createElement("img")
		profileImage.addEventListener("click", function(e){
			selectUser(user_id)
		})
		profileImage.classList.add("profile-image")
		profileImage.classList.add("rounded-circle")
		profileImage.classList.add("img-fluid")
		profileImage.src = "{% static 'img/profile_image.png' %}"
		var profile_image_id = "id_profile_image_" + msg_id
		profileImage.id = profile_image_id
		newMessageDiv.appendChild(profileImage)

		var usernameSpan = document.createElement("span")
		usernameSpan.innerHTML = msg
		usernameSpan.classList.add("username-span")
		usernameSpan.addEventListener("click", function(e){
			selectUser(user_id)
		})
		newMessageDiv.appendChild(usernameSpan)

		chatLog.insertBefore(newMessageDiv, chatLog.firstChild)

		preloadImage(profile_image, profile_image_id)
 	}

  function selectUser(user_id){
		// Weird work-around for passing arg to url
		var url = "{% url 'friend-detail' user_id=53252623623632623 %}".replace("53252623623632623", user_id)
		var win = window.open(url, "_blank")
		win.focus()
	}



  function setPageNumber(pageNumber){
		document.getElementById("id_page_number").innerHTML = pageNumber
	}

  function setPaginationExhausted(){
		setPageNumber("-1")
	}

	/*
		Retrieve the chat room messages given the page number.
	*/
	function getRoomChatMessages(){
		var pageNumber = document.getElementById("id_page_number").innerHTML
		if(pageNumber != "-1"){
			setPageNumber("-1") // loading in progress
			chatSocket.send(JSON.stringify({
				"command": "get_room_chat_messages",
				"room_id": roomId,
				"page_number": pageNumber,
			}));
		}
	}

  function displayChatroomLoadingSpinner(isDisplayed){
		console.log("displayChatroomLoadingSpinner: " + isDisplayed)
		var spinner = document.getElementById("id_chatroom_loading_spinner")
		if(isDisplayed){
			spinner.style.display = "block"
		}
		else{
			spinner.style.display = "none"
		}
	}

  function handleMessagesPayload(messages, new_page_number){
		if(messages != null && messages != "undefined" && messages != "None"){
			setPageNumber(new_page_number)
			messages.forEach(function(message){
				appendChatMessage(message, true, false)
			})
		}
		else{
			setPaginationExhausted() // no more messages
		}
	}

  /*
		Get the next page of chat messages when scrolls to bottom
	*/
	function chatLogScrollListener(e) {
		var chatLog = document.getElementById("id_chat_log")
		if ((Math.abs(chatLog.scrollTop) + 2) >= (chatLog.scrollHeight - chatLog.offsetHeight)) {
			getRoomChatMessages()
		}
	}

  /*
		Enable the function "chatLogScrollListener"
	*/
	function enableChatLogScrollListener(){
		document.getElementById("id_chat_log").addEventListener("scroll", chatLogScrollListener);
	}
	
	/*
		Disable the function "chatLogScrollListener"
	*/
	function disableChatLogScrollListener(){
		document.getElementById("id_chat_log").removeEventListener("scroll", chatLogScrollListener)
	}


	function highlightFriend(userId){
		// select new friend
		document.getElementById("id_friend_container_" + userId).style.background = "#f2f2f2"
	}

	function clearHighlightedFriend(){
		{% if m_and_f %}
			{% for x in m_and_f %}
				document.getElementById("id_friend_container_{{x.friend.id}}").style.background = ""
			{% endfor %}
		{% endif %}

		// clear the profile image and username of current chat
		document.getElementById("id_other_user_profile_image").classList.add("d-none")
		document.getElementById("id_other_user_profile_image").src = "{% static 'img/profile_image.png' %}"
		document.getElementById("id_other_username").innerHTML = ""
	}

	function handleUserInfoPayload(user_info){
		document.getElementById("id_other_username").innerHTML = user_info.username
		document.getElementById("id_other_user_profile_image").classList.remove("d-none")
		document.getElementById("id_user_info_container").href = "{% url 'friend-detail' user_id=5454544333344 %}".replace("5454544333344", user_info.id)
		preloadImage(user_info.profile_image, "id_other_user_profile_image")
	}

  

  function createOrReturnPrivateChat(id){
		console.log(id)
		fetch(`${url}/message/create-or-return-private-chat/${id}/`, {
			body: null,
			method: 'POST',
			headers:{
				'X-CSRFToken': "{{csrf_token}}",
				"Content-Type": "application/json"
			}
		}).then((res) => res.json()).then((data) =>{
			//console.log("SUCCESS", data)
			if(data['response'] == "Successfully got the chat"){
				var chatroomId = data['chatroom_id']
				setupWebSocket(chatroomId)
			}
			else if(data['response'] != null){
				alert(data['response'])
			}
		})

	}
</script>
  
{% endblock %}