@extends('layouts.app')
  @include('layouts.datatables_css')
@section('content')


<section class="">
  <div class="row">
    <div class="col s12">
        <div class="card-content">
          <span class="card-title"><h2>Inbox</h2></span>
          <hr>

          <div class="row">
            <div class="col s12">
              <table class="js-exportable" id="table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Last Message</th>
                    <th>Time</th>
                    <th>Chat</th>
                  </tr>
                </thead>
                <tbody id="messages">
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
@endsection

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" defer></script>



<!-- <script>
  $(function(){
      $('.js-exportable tfoot th').each( function () {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      } );

      // DataTable
      var table = $('.js-exportable').DataTable({
        pageLength:10,
        lengthMenu: [5, 10, 20,30,50,100]
      });

      // Apply the search
      table.columns().every( function () {
          var that = this;

          $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                      .search( this.value )
                      .draw();
              }
          } );
      } );

    });
</script> -->
<script type="text/javascript" src="{{ asset('js/moment.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/sendbird.min.js') }}"></script>
<script>
    const APP_ID = "922816D0-97AA-4048-A727-FCB7CDAD4074";
    var sb = new SendBird({'appId': APP_ID});
    var connectedMembers=0;
    const myUserId = '{!! $teacherId !!}';
    var state = {
      messages: [],
      channels: [],
      user: {},
      showLoader: false,
      userId: "",
      connectedToSendBird: false,
      refreshing: false,
      showSearchInput: false,
      searchText: ""
    };
    setState=(params)=>{
        state = {...state,...params};
    }

    $(function(){


        function connectToSendBird() {
          $("#messages").append("<p style='margin-top:20px'>Please wait !</p>");
            sb.connect(myUserId, (user, error) => {
            if (error) {
                console.log(error);
                return;
            }
                getChannelList(myUserId);
                receiveMessages();
            });
        }
       function getChannelList(userId) {
            var filteredQuery = sb.GroupChannel.createMyGroupChannelListQuery();
            filteredQuery.userIdsIncludeFilter = [userId];
            filteredQuery.next((channels, error) => {
            if (error) {
                console.log("Channel List error",error);
                return;
            }
            state["channels"] =[...channels];
            getChannelDetails(userId, channels);
            });
        }

        async function getChannelDetails(userId, channels) {

            let messageList = [];
            for (i in channels) {
            let messageIndex = messageList.findIndex(
                message => message.id === channels[i].url
            );
            let msgType = "text";
            if (
                channels[i].lastMessage &&
                channels[i].lastMessage.messageType == "file"
            ) {
                msgType = "image";
            } else if (channels[i].lastMessage) {
                if(channels[i].lastMessage.customType == "contact"){
                msgType = "contact";

                }
            }
            let details =  await getChannelName(channels[i]);
            let channelName = details.name;
            messageList.push({
                id: channels[i].url,
                lastMessage: channels[i].lastMessage
                ? channels[i].lastMessage.message
                : "",
                lastMessageId: channels[i].lastMessage
                ? channels[i].lastMessage.messageId
                : "",
                lastMessageType: msgType,
                channel: channels[i],
                username: channelName,
                studentId:details.id,
                disabled: channels[i].members.length < 2,
                status: channels[i].unreadMessageCount > 0 ? "online" : "offline",
                profileUrl: details.profileUrl,
                time:moment(channels[i].lastMessage.createdAt).format("hh:mm a DD-MM-YYYY")

            });
            }
            $("#messages").empty();
            if(messageList.length===0){
              $("#messages").append("<p style='margin-top:20px'>No chats !</p>");
              return;
            }

            messageList.forEach(message=>{
                const channelHtml = getChatHtml(message);
                $("#messages").append(channelHtml);
            })
           setState({
                messages: messageList,
                inboxList: messageList,
                refreshing: false
            });
        }
        function getChatHtml(params,isNew=false){
          const url = "http://localhost/lingo-admin-panel/public";
          let lastMessage = `<p>${params.lastMessage}</p>`;
          if(isNew){
            console.log("is new");
            lastMessage = `<p style="font-weight:bold">${params.lastMessage}</p>`;
          }
            return `<tr id="${params.id}">
                  <td>${params.username}</td>

                  <td class="last-message">${lastMessage}</td>
                  <td>${params.time}</td>
                    <td>

                      <span class="secondary-content">
                        <a target="_blank" href="{{ url('/students/chat/${params.studentId}')}}"  class="waves-effect waves-green btn-flat tooltipped" data-position="bottom" data-tooltip="chat">
                          <i class="material-icons green-text">chat</i>
                        </a>
                      </span>

                    </td>
                  </tr>`
        }

       async function getChannelName(channel) {
            let data = JSON.parse(channel.data);

            let members = channel.members;
            let guestUserIndex = members.findIndex(
                member => member.userId != myUserId
            );
            let user = await getUser(members[guestUserIndex].userId);
            return {
                name: user.username,
                profileUrl:"",
                id:user.id

            };

        }
        function getUser(userId){
           return fetch("http://lingo-api.tootle.review:3000/api/users" + "/" + userId + "?filter[include]=profiles", {
                method: "GET",
                headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
                }
            })
                .then(response => response.json()) // returns promise
                .then(responseJson => {
                return responseJson;
            }).catch(err=>console.log(err));
        }



        /**
         * Receive message event handler function
         */
        async function receiveMessages() {
            let ChannelHandler = new sb.ChannelHandler();

            ChannelHandler.onMessageReceived = async (channel, message) => {
            let msgObjs = [...state.messages];
            let index =state.messages.findIndex(msg => msg.id == channel.url);
            let msgType = "text";
            if (message.messageType == "file") {
                msgType = "image";
            }
            if (message.customType == "contact") {
                msgType = "contact";
            } else if (message.messageType == "contact") {
                msgType = "contact";
            }

            let details = await getChannelName(channel);
            let channelName = details.name;
            /**Modifies last message of existing user chat */
            if (index != -1) {
                let currentMsgObj = msgObjs[index];

                currentMsgObj.lastMessage = message.message;
                currentMsgObj.lastMessageId = message.messageId;
                currentMsgObj.time = moment(message.createdAt).format("hh:mm a DD-MM-YYYY");
                (currentMsgObj.lastMessageType = msgType),
                (currentMsgObj.status = "online");
                msgObjs.splice(index, 1);
                msgObjs.unshift(currentMsgObj);
                updateInboxList(currentMsgObj,index);

            } else {
              if(msgObjs.length===0){
                $("#messages").empty();
              }
                /** Add new user chat */
                const messageObj = {
                  id: channel.url,
                  time:moment(message.createdAt).format("hh:mm a DD-MM-YYYY"),
                  lastMessage: message.message,
                  lastMessageId: message.messageId,
                  lastMessageType: msgType,
                  channel: channel,
                  studentId:details.studentId,
                  username: channelName,
                  status: "online",
                  profileUrl: ""
                }
                msgObjs.unshift(messageObj);
                updateInboxList(messageObj,-1);
            }
            setState({
                messages: msgObjs
            });
            };
            sb.addChannelHandler(myUserId, ChannelHandler);
        }
        function updateInboxList(message,index){
          var table = $("table");

          if(index >=0){
            $("#"+message.id).remove();
          }

          const chatHtml = getChatHtml(message,true);
          $(chatHtml).prependTo("#messages");
        }


        connectToSendBird();



        })
</script>