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


  <div class="chat-container">
    <div class="row student-name">
      <p class="title">{{ $studentName }}</p>  
    </div>
    <div class="row">
        <div class="chat-list" id="chat-list">
               <div class="loading">
                   <p>Please wait !</p>
               </div>

        </div>
        
    </div>
    <div class="row input-area">
            <input type="text" placeholder="type here" id="chatInput" class="inputBox" style="width:70%" >
            {!! Form::button('Send<i class="material-icons right">send</i>', ['type' => 'button', 'class' => 'btn' ,'id'=>'sendButton']);
              !!}
    </div>
</div>


    @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 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 memberList = {!! json_encode($members) !!};
    
    var state = {
        members :[...memberList],
        myUserId:"5cdcfd74d67624597d3dec32",
        nextMessage: "",
        groupName:"",
        groupChannel:{},
        chatType:"direct"
    };

    $(function(){

        function chatInit() {
            let members = [...state.members];
            let userIdArray = members.map(member => member.id);
            connectToSendBird(userIdArray);
        }
        function connectToSendBird(userIdArray) {
            sb.connect(userIdArray[connectedMembers], (user, error) => {
            if (error) {
                console.log(error);
                return;
            }
            // console.log(user);
            connectedMembers++;
            if (connectedMembers + 1 > userIdArray.length) {
                createChannel();
                return;
            }
            connectToSendBird(userIdArray);
            });
        }
        function createChannel() {
            let members = [...state.members];
            let userIds = members.map(member => member.id);
            let params = new sb.GroupChannelParams();
            let isDistinct = true;
            let channelName = state.groupName.length > 0 ? state.groupName : "";
            if (state.chatType == "group" && state.chatStatus == "new") {
            isDistinct = false;
            } else if (state.chatType == "direct") {
            isDistinct = true;
            }

            params.isPublic = false;
            params.isDistinct = true;
            params.addUserIds(userIds);
            params.data = JSON.stringify({
            chatType: state.chatType
            });
            params.name = channelName;
            sb.GroupChannel.createChannel(params, (groupChannel, error) => {
                if (error) {
                    console.log(error);
                    return;
                }
                // console.log("Group Channel",groupChannel);
                state.groupChannel=groupChannel;
                fetchMessages();
            });
        }
        function fetchMessages() {
            let messageList = [];
            var prevMessageListQuery = state.groupChannel.createPreviousMessageListQuery();

            prevMessageListQuery.reverse = false;
            let chatHtml =``;
            prevMessageListQuery.load((messages, error)=> {
            if (error) {
                console.log(error);
                return;
            }
            messages.forEach(message => {
                if (message.data != "" && message.data) {
                if (message.messageType == "file") {
                    let messageData = JSON.parse(message.data);
                    messageData.imageSource = message.url;
                    messageList.push(messageData);
                } else {
                    let messageData = JSON.parse(message.data);

                    if(messageData.from==state.myUserId){
                        chatHtml+=`<div class="row"><div class="sent">
                    <p style="color:#fff">`+message.message+`</p>
                </div></div>`
                    }
                    else{
                        chatHtml+=`<div class="row"><div class="received">
                    <p style="color:#fff">`+message.message+`</p>
                </div></div>`
                    }
                    messageList.push(JSON.parse(message.data));
                }
                }
            });
           $(".loading").hide();
            $("#chat-list").append(chatHtml);
            let chatHistory = Object.assign({}, state.chatHistory);

                chatHistory.messages = messageList;
            state.chatHistory=chatHistory;
            // console.log("Chat history",state.chatHistory);
            state.groupChannel.markAsRead();
            $("#chat-list").scrollTop($("#chat-list").prop("scrollHeight"));
                });
        }
        function sendChatMessage(message, messageBody) {
            const params = new sb.UserMessageParams();
            params.message = message;
            params.data = JSON.stringify(messageBody);
            params.pushNotificationDeliveryOption = "default"; // Either 'default' or 'suppress'
            state.groupChannel.sendUserMessage(params, function(message, error) {
            if (error) {
                console.log(error);
                return;
            }
            });
        }

        function sendMessage(){
            if (state.nextMessage) {
            if (state.nextMessage.trim() != "") {
                    let chatHistory = Object.assign({}, state.chatHistory);
                    let messages = chatHistory.messages;
                    let messageBody = {
                        time: moment().format("hh:mm a"),
                        type: "text",
                        imageSource: "",
                        message: state.nextMessage.trim(),
                        from: state.myUserId,
                        senderName: state.myUserName,
                        id: new Date().toLocaleTimeString(),
                        profileUrl: state.myProfileUrl
                };
                messages.push(messageBody);
                const chatHtml = ` <div class="row"><div class="sent">
                    <p style="color:#fff">`+state.nextMessage+`</p>
                </div></div>`;
                $("#chat-list").append(chatHtml);
                $("#chatInput").val("");
                $("#chat-list").scrollTop($("#chat-list").prop("scrollHeight"));
                sendChatMessage(state.nextMessage.trim(), messageBody);
                state.chatHistory=chatHistory;
                state.nextMessage="";
                }
            }
        };
        function  startChannelHandler(){
            var ChannelHandler = new sb.ChannelHandler();
            ChannelHandler.onMessageReceived = (channel, message) => {
            if (channel.url == state.groupChannel.url) {
                let chatHistory = Object.assign({}, state.chatHistory);
                let messageData = JSON.parse(message.data);
                if (message.messageType == "file") {
                    messageData.imageSource = message.url;
                    chatHistory.messages.push(messageData);
                } else {
                    chatHistory.messages.push(JSON.parse(message.data));
                    const chatHtml = `<div class="row"><div class="received">
                        <p style="color:#fff">`+message.message+`</p>
                    </div></div>`;
                    $("#chat-list").append(chatHtml);
                    //$("#chatInput").val("");
                    $("#chat-list").scrollTop($("#chat-list").prop("scrollHeight"));
                }
                state.chatHistory=chatHistory;

            }
            };

            let members = [...state.members];
            var handlerId = members
            .map(function(member) {
                return member.id;
            })
            .join("");
            sb.addChannelHandler(handlerId, ChannelHandler);
        };
        $("#chatInput").on("keyup",function(){
            state.nextMessage=$("#chatInput").val();
            // console.log(state.nextMessage);
        })
        $("#sendButton").on("click",function(){
            // console.log("Clicked");
            sendMessage();
        })

        chatInit();
        startChannelHandler();



        })
</script>