{% extends '@Core/base.html.twig' %}
{% block sectionTitle %}Chat{% endblock %}

{% block breadcrumbLinks %}
    <li>Chat</li>
{% endblock %}

{% block content %}

    <div class="content">

        <div class="panel panel-white">
            <div class="panel-body">

                <!-- CHAT ROOM -->
                <div class="card">
                    <div class="card-header row pl-20 pr-20">
                        <div style="display: inline-block">
                            <img src="{{ userToChat.getWebPath }}" class="img-circle img-md" alt="" width="40px">
                        </div>
                        <h6 class="card-title" style="display: inline-block"> {{ userName }}</h6>
                        <hr>
                    </div>

                    <div class="card-body pl-20 pr-20">

                        <div class="row p-20" style="background-color: #f2f2f2;"> <!-- dcf8c6 -->

                            <div id="conversation">
                                {% include ("CoreBundle:Chat:chat_conversation.html.twig") %}
                            </div>

                        </div>

                        <div class="row p-20" style="background-color: #f5f1ee">
                            <textarea name="message" id="message" class="form-control mb-3" rows="3" cols="1" placeholder="Escribe tu mensaje aquí..." onkeyup="countChar(this)"></textarea>
                            <h6 style="margin-top: 0px !important; margin-bottom: 0px !important;"><small id="charNum">Quedan 500 carácteres</small></h6>
                            <div class="d-flex align-items-center" style="float: right; margin-top: 10px;">
                                <button type="button" class="btn bg-teal-400 btn-labeled btn-labeled-right ml-auto" onclick="postMessage()"><b><i class="icon-paperplane"></i></b> Enviar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- CHAT ROOM -->


            </div>
        </div>

    </div>

{% endblock%}

{% block script%}

    <script>

        var websocket = null;
        $(document).ready(function(){

            // SCROLL
            $("#conversation_ul").animate({ scrollTop: $('#conversation_ul').prop("scrollHeight")}, 1000);

            websocket = new WebSocket("ws://{{ url_clacclac }}/chat/php-socket.php");
            websocket.onopen = function(event) {
                //showMessage("<div class='chat-connection-ack'>Connection is established!</div>");
            }
            websocket.onmessage = function(event) {
                var Data = JSON.parse(event.data);
                //console.log(Data);
                if ((Data.chat_user_from == '{{ userFrom.id }}' && Data.chat_user_to == '{{ userToChat.id }}') ||
                   (Data.chat_user_to == '{{ userFrom.id }}' && Data.chat_user_from == '{{ userToChat.id }}')){
                    //showMessage("<div class='"+Data.message_type+"'>"+Data.message+"</div>");
                    refreshChat(Data.message);
                }else{
                    //console.log("recibo");
                    getNotificationsNotReadedRoom(Data.message);
                }
            };

            websocket.onerror = function(event){
                console.log("Problema conectando con el chat. Si el problema persiste póngase en contacto con CLAC CLAC.");
            };
            websocket.onclose = function(event){
                console.log("Problema conectando con el chat. Si el problema persiste póngase en contacto con CLAC CLAC.");
            };

            //SET NOTIFICATIONS AS READED
            $(window).focus(function() {
                setNotificationsAsReaded();
            });


            // SET NOTIFICATIONS NOT READED
            setNotificationsAsReaded();

        });



        function showMessage(messageHTML) {
            console.log(messageHTML);
        }

        //ON ENTER SEND MESSAGE
        $('#message').keydown(function (e) {

            if (e.keyCode == 13) {
                postMessage();
                return false;
            }
        });


        // POST A NEW CHAT MESSAGE
        function postMessage() {

            $("#conversation_ul").append("<li class=\"media reversed\"> <div class=\"media-body\"> <div class=\"media-content\"><i class=\"icon-menu\"></i></div> <span class=\"media-annotation display-block mt-10\">2 hours ago</span> </div> <div class=\"media-right\"> <img src=\"{{ userFrom.getWebPath }}\" class=\"img-circle img-md\" alt=\"\"> </div> </li>");
            $("#conversation_ul").animate({ scrollTop: $('#conversation_ul').prop("scrollHeight")}, 1000);

            var message = $("#message").val();
            var userFrom = '{{ userFrom.id }}';
            var userToChat = '{{ userToChat.id }}';

            if (message != ""){
                var route = Routing.generate('post_chat_message', {'userFrom' : userFrom , 'userToChat' : userToChat, 'message' : message});

                $.post(route, function(result) {

                    //WEB SOCKET MESSAGE
                    var messageJSON = {
                        chat_user_from: '{{ userFrom.id }}',
                        chat_user_to: '{{ userToChat.id }}',
                        chat_message: $('#message').val()
                    };

                    // ADD MESSAGE
                    $("#message").val("");
                    $('#conversation').html(result);

                    //SCROLL MESSAGE
                    var objDiv = document.getElementById("conversation_ul");
                    var charNum = $('#charNum');
                    objDiv.scrollTop = objDiv.scrollHeight;

                    //WEBSOCKET NOTIFICATION
                    websocket.send(JSON.stringify(messageJSON));

                    charNum.css('color', '');
                    charNum.html('Quedan 500 carácteres');

                }).fail(function(error) {
                    console.log(error.responseText);
                });
            }
        }

        // REFRESH CHAT
        function refreshChat(message){

            var userFrom = '{{ userFrom.id }}';
            var userToChat = '{{ userToChat.id }}';

            var route = Routing.generate('refresh_chat', {'userFrom' : userFrom , 'userToChat' : userToChat});

            $.post(route, function(result) {
                //APPEND MESSAGE
                $('#conversation').html(result);
                //SCROLL DOWN
                var objDiv = document.getElementById("conversation_ul");
                objDiv.scrollTop = objDiv.scrollHeight;

                // SET NOTIFICATIONS NOT READED
                getNotificationsNotReadedRoom("");

            }).fail(function(error) {
                console.log(error.responseText);
            });
        }


        // SET NOTIFICATIONS AS READED
        function setNotificationsAsReaded(){

            var userFrom = '{{ userFrom.id }}';
            var userToChat = '{{ userToChat.id }}';

            var route = Routing.generate('set_chat_as_readed', {'userFrom' : userFrom , 'userToChat' : userToChat});

            $.post(route, function(result) {
                //APPEND MESSAGE
                $('#conversation').html(result);

                //SCROLL DOWN
                var objDiv = document.getElementById("conversation_ul");
                objDiv.scrollTop = objDiv.scrollHeight;

                //WEB SOCKET MESSAGE
                var messageJSON = {
                    chat_user_from: '{{ userFrom.id }}',
                    chat_user_to: '{{ userToChat.id }}',
                    chat_message: "check"
                };
                //WEBSOCKET NOTIFICATION
                websocket.send(JSON.stringify(messageJSON));

                // SET NOTIFICATIONS NOT READED
                getNotificationsNotReadedRoom("");

            }).fail(function(error) {
                console.log(error.responseText);
            });
        }

        // GET NOTIFICATIONS NOT READED
        function getNotificationsNotReadedRoom(message){

            var userFrom = '{{ userFrom.id }}';

            var route = Routing.generate('messages_not_readed', {'userFrom' : userFrom });

            $.post(route, function(result) {

                //NOTIFIACTION
                $("#chat_badge").html(result);

                //PLAY SOUND CHAT
                if (message != "check" && message != "" && message != "joined" && message != "unjoined"){
                    //console.log("sound chat:" + message);
                    var x = document.getElementById("buzzerChat");
                    x.play();
                }

            }).fail(function(error) {
                console.log(error.responseText);
            });
        }

        function countChar(val) {
            var characters = 500 - val.value.length;
            var charNum = $('#charNum');
            if(characters <= 20) {
                charNum.css('color', 'red');
            } else {
                charNum.css('color', '');
            }
            charNum.html('Quedan ' + characters + ' carácteres');
        }

    </script>


{% endblock %}