var defaultRoom = "/chat-ws/general";
var room = defaultRoom;
var users = {};

$(function () {
    if($(window).width() < 1400) {
        $("body").addClass("transition-none");
        setTimeout(function() {
            $("body").removeClass("transition-none");
        }, 300);

        $("body").addClass("bigchat-closed");
    }

    $(".bigchat-close").click(function() {
        $("body").addClass("bigchat-closed");
    });

    $("#bigchat-open").click(function() {
        $("body").removeClass("bigchat-closed");
    });

    getFriends();

    $("#container").click(function() {
        $(".popover").remove();
    });

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        if(e.target == $("#bigchat-friends-tab")[0]) {
            getFriends();
        }
    });

    $(".bigchat-body").on("mouseleave", function(e) {
        if(!$(e.relatedTarget).is(".faceMocion") && !$(e.relatedTarget).is(".faceMocion div")) {
            $(".faceMocion").fadeOut('fast');
        }

    });

    $("#chat-active-list").on("click", ".dropdown-item", function() {
        openChat($(this).data("url"));
    });

    $(document).on('keyup', function(e) {
        if (e.key == "Escape") $("body").addClass("bigchat-closed");
    });

    $("#room-select").change(function() {
        var _this = this;

        if($(_this).val() == "/chat-ws/PRO") {
            if(!isPro(function() {
                setRoom(_this);
            })) {
                $(_this).val(0);
            }
        } else if ($(_this).val()) {
            setRoom(_this);
        }
    });

    var sendMessageContent = $("#bigchat-sendmessage-textarea");

    sendMessageContent.emojioneArea({
        emojiPlaceholder: ":smile_cat:",
        searchPlaceholder: "Hledat",
        tones: false,
        inline: true,
        autocomplete: false,
        events: {
            click: isChatAllowed,
            keyup: function (editor, event) {
                var area = $("#bigchat-sendmessage-textarea")[0].emojioneArea;

                if(area.getText().length > 1) {
                    var lastChar = area.getText()[area.getText().length - 1];

                    if (event.which == 13 || (lastChar.trim() == "" && event.which > 100)) {
                        sendBigMessage();
                    }
                }
            }
        }
    });

    try {
        if(localGame) {
            socketsChatConnection = IPub.WebSockets.WAMP.initialize(localUrl);
        } else {
            socketsChatConnection = IPub.WebSockets.WAMP.initialize(remoteUrl);
        }

        socketsChatConnection.on('socket/connect',
            function (session) {
                console.log('Connection to server was established');

                $(".bigchat-connecting").fadeOut('fast');

                socketChatSession = session;

                socketChatSession.subscribe("/chat-ws/control", function (topic, event) {

                    if (typeof event == 'string') {
                        event = $.parseJSON(event);
                    }

                    if (event.type == "connected") {
                        initChatRequest();
                    } else if (event.type == "online-detail") {
                        uniqueList = event.ids;

                        $("[data-online-id]").each(function() {
                           if(uniqueList && uniqueList[$(this).data("online-id")]) {
                               $(this).removeClass("text-danger");
                               $(this).addClass("text-success");
                           } else {
                               $(this).removeClass("text-success");
                               $(this).addClass("text-danger");
                           }
                        });
                    } else if (event.type == "init-chat") {
                        $.extend(users, event.chat_messages.u);
                        initChatList(event.chat_active_list, event.chat_messages.m);
                    } else if (event.type == "chat-active-add" || event.type == "chat-active-open") {
                        $.extend(users, event.chat_messages.u);
                        var messages = event.chat_messages.m ? event.chat_messages.m[event.chat["url"]] : [];
                        initChat(event.chat, messages);
                        if(event.chat["default"]) {
                            openChat(event.chat["url"], true);
                        } else {
                            signalizeNewMessage();
                        }
                    } else processMessages(topic, event);
                });
            },
            function (code, reason, detail) {
                $(".bigchat-connecting > .message").html("V tuto chvíli se nelze připojit.");
            }
        );

        socketsChatConnection.on('socket/disconnect', function (error) {
            $(".bigchat-connecting").fadeIn();

            if(error.code == 5 || error.code == 6) {
                $(".bigchat-connecting .bowlG").show();
                $(".bigchat-connecting .message").html("Obnovování spojení...");
            } else {
                $(".bigchat-connecting .bowlG").hide();
                $(".bigchat-connecting .message").html("V tuto chvíli se nelze připojit.");
                $("#bigchat-connecting_reload").removeClass("hidden");
            }
        });
    } catch (e) {
        console.error(e);
    }

    $("#user-search").on("keyup", function(e) {
        $(".popover").remove();

        var d = new Date();

        if($(this).val().length > 2) {

            $.ajax({
                url: urlList.searchNick,
                data: {
                    "nick" : $(this).val()
                },
                success: function(data) {
                    currentDate = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toJSON().slice(0, 16).replace("T", " ");

                    if (data && data.length > 0) {
                        var found = "";

                        for(var i in data) {
                            found += "<a data-user-nick=\"" + data[i].nick + "\" data-user-id=\"" + data[i].id + "\" data-pro=\"" + data[i].pro + "\" data-avatar='" + data[i].avatar + "' href=\"javascript:void(0)\" class=\"bigchat-search-user pop start-chat\"><i data-online-id=\"" + data[i].id + "\" class=\"fas fa-user " + (uniqueList && uniqueList[data[i].id] ? "text-success" : "text-danger") + "\"></i> " + data[i].nick + (data[i].pro >= currentDate ? " <span class=\"badge bg-warning text-dark badge-small\">PRO</span>" : "") + "</a>";
                        }

                        $(".bigchat-search-content").html(found);
                        attachPopover(".bigchat-search-content");

                    } else {
                        $(".bigchat-search-content").html("<div class=\"bigchat-search-empty\"><i class=\"fas fa-user-slash\"></i></div>");
                    }
                }
            });
        } else {
            $(".bigchat-search-content").html("<div class=\"bigchat-search-empty\"><i class=\"fas fa-user-slash\"></i></div>");
        }
    });

    $("body").on("click", ".add-friend", function(e) {
        var friendUserId = $(this).data("user-id");

        isVerified(function() {
            var target = e.currentTarget;
            $(target).addClass("disabled");

            $.ajax({
                url: urlList.addFriend,
                data: {
                    "friend_user_id": friendUserId
                },
                success: function(data) {
                    $(target).removeClass("disabled");

                    if(data && data.type) {
                        $(target).hide();
                        $(".badge-friend", $(target).closest(".popover")).fadeIn("fast");

                        getFriends();

                        $('[href="#bigchat-friends"]').tab('show');
                    }
                },
                error: function() {
                    $(target).removeClass("disabled");
                }
            });
        });
    });

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        switch (e.target.id){
            case "bigchat-search-tab":{
                $("#user-search").trigger("focus");
                break;
            }
        }
    });

    $("body").on("click", ".search-friends-btn", function() {
        $('[href="#bigchat-search"]').tab('show');
    });

    $("body").on("click", ".remove-friend", function(e) {
        var target = e.currentTarget;
        $(target).addClass("disabled");

        var friendUserId = $(this).data("user-id");

        $.ajax({
            url: urlList.removeFriend,
            data: {
                "friend_user_id": friendUserId
            },
            success: function(data) {
                if(data && data.type) {
                    getFriends();
                    $(".pop").popover("hide");
                    $(".add-friend[data-user-id='" + friendUserId + "']").show();
                }
            },
            error: function() {

            }
        });

        e.stopPropagation();
    });

    $("body").on("click", ".start-chat", function(e) {
        var friendUserId = $(this).data("user-id");

        isVerified(function() {
            socketChatSession.publish("/chat-ws/control", {
                "command": "chat-open",
                "playerInfo": playerInfo,
                "userId": friendUserId
            });
        });
    });


    $("body").on("click", ".toggle-ignore", function(e) {
        var ignoredUserId = $(this).data("user-id");

        isVerified(function() {
            var target = e.currentTarget;
            $(target).addClass("disabled");

            $.ajax({
                url: urlList.toggleIgnore,
                data: {
                    "ignored_user_id": ignoredUserId
                },
                success: function(data) {
                    $(target).removeClass("disabled");

                    if(data && data.type) {
                        if (data.type == "add") {
                            $(target).removeClass("btn-outline-dark");
                            $(target).addClass("btn-outline-danger");
                        } else if(data.type == "remove") {
                            $(target).addClass("btn-outline-dark");
                            $(target).removeClass("btn-outline-danger");
                        }

                        $(".popover").remove();
                        getFriends();
                    }
                },
                error: function() {
                    $(target).removeClass("disabled");
                }
            });
        });
    });

    $("#chat-unsubscribe").click(function() {
       unsubscribeRoom(room);
    });

    $("body").on("click", ".share-btn", function() {
        var _this = $(this)

        isVerified(function() {
            try {
                socketChatSession.publish("/chat-ws/control", {
                    "command": "share",
                    "playerInfo": playerInfo,
                    "userId": _this.data("recipient"),
                    "link": _this.data("link"),
                    "type": _this.data("type"),
                    "param": _this.data("param")
                });
            } catch (e) {
                console.error(e);
            }
        });
    });
});

function setRoom(input) {
    if(!$("#chat-active-list [data-url='" + $(input).val() + "']").length) {
        try {
            socketChatSession.publish("/chat-ws/control", {
                "command": "chat-active-add-request",
                "playerInfo": playerInfo,
                "default_chat": $(input).val()
            });
        } catch (e) {
            console.error(e);
        }
    } else {
        openChat($(input).val());
    }
    $(input).val(0);
}

function openChat(room, noChange) {
    this.room = room;

    if(room == "/chat-ws/general") {
        $("#chat-unsubscribe").hide();
    } else {
        $("#chat-unsubscribe").show();
    }

    if(!noChange) {
        try {
            socketChatSession.publish("/chat-ws/control", {
                "command": "chat-active-set-request",
                "playerInfo": playerInfo,
                "default_chat": room
            });
        } catch (e) {
            console.error(e);
        }
    }

    $("#chat-active-button").html($("#chat-active-list [data-url='" + room + "']").html());

    $(".bigchat-messages-content").hide();
    $(".bigchat-messages-content[data-url='" + room + "'").show();

    $('#bigchat-tabs a[href="#bigchat-chat"]').tab('show');

    // signalize a new message

    if($("[data-unread-url='" + room + "']").is(":empty")) {
        scrollDown($(".bigchat-messages-content[data-url='" + room + "'"));
    }

    $("[data-unread-url='" + room + "']").html("");

    signalizeNewMessage();
}

function signalizeNewMessage() {
    if($(".dropdown-menu [data-unread-url]").length == $(".dropdown-menu [data-unread-url]:empty").length) {
        $("#chat-active-button [data-unread-url]").html("");
        $(".badge-unread").html("");
        $(".badge-unread").addClass("hidden");
    } else {
        $("#chat-active-button [data-unread-url]").html("!");
        $(".badge-unread").html("!");
        $(".badge-unread").removeClass("hidden");
    }
}

function refreshCurrentDate() {
    var d = new Date();
    currentDate = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toJSON().slice(0, 16).replace("T", " ");
}

function showEmptyFriends() {
    $(".bigchat-friends-content").html("<div class=\"bigchat-search-empty\"><i class=\"fas fa-user-slash\"></i><a href=\"javascript:void(0);\" class=\"search-friends-btn btn btn-outline-dark d-block mt-3\"><i class=\"fas fa-search\"></i> Vyhledat přátele</a></div>");
}

function getFriends() {
    $.ajax({
        url: urlList.getFriends,
        success: function(data) {
            refreshCurrentDate();

            if (data) {
                var found = "";

                friends = [];
                ignored = [];

                if(data.friends.length > 0) {
                    for (var i in data.friends) {
                        found += "<a data-remove=\"true\" data-user-nick=\"" + data.friends[i].nick + "\" data-user-id=\"" + data.friends[i].id + "\" data-pro=\"" + data.friends[i].pro + "\" data-avatar='" + data.friends[i].avatar + "' href=\"javascript:void(0)\" class=\"bigchat-search-user pop start-chat\"><i data-online-id=\"" + data.friends[i].id + "\" class=\"fas fa-user " + (uniqueList && uniqueList[data.friends[i].id] ? "text-success" : "text-danger") + "\"></i> " + data.friends[i].nick + (data.friends[i].pro >= currentDate ? " <span class=\"badge bg-warning text-dark badge-small\">PRO</span>" : "") + "<div data-user-id=\"" + data.friends[i].id + "\" class=\"close remove-friend float-end\"></div></a>";

                        friends[data.friends[i].id] = true;
                    }

                    $(".bigchat-friends-content").html(found);
                    attachPopover(".bigchat-friends-content");
                } else {
                    showEmptyFriends();
                }

                if(data.ignored) {
                    for (var i in data.ignored) {
                        ignored[data.ignored[i].id] = true;
                    }
                }

            } else {
                showEmptyFriends();
            }
        }
    });
}

function initChatRequest() {
    try {
        socketChatSession.publish("/chat-ws/control", {
            "command": "init-chat-request",
            "playerInfo": playerInfo
        });
    } catch (e) {
        console.error(e);
    }
}

function initChatList(chat_active_list, chat_messages) {
    $("#chat-active-list").html();

    for(var i in chat_active_list) {
        var chat_active = chat_active_list[i];

        if(chat_active["url"] == "/chat-ws/PRO" && !playerInfo["isPro"]) {
            unsubscribeRoom("/chat-ws/PRO");
            continue;
        }
        initChat(chat_active, chat_messages ? chat_messages[chat_active["url"]] : []);
    }

    openChat(defaultRoom, true);
}

function initChat(chat_active, messages) {
    subscribeRoom(chat_active["url"], chat_active["name"], chat_active["unread"]);

    if(chat_active["default"]) defaultRoom = chat_active["url"];

    var chatDiv = $(".bigchat-messages-content[data-url='" + chat_active["url"] + "']");

    if(chatDiv.length == 0) {
        chatDiv = $("<div class=\"bigchat-messages-content ps-3 pe-3 hidden\" data-url=\"" + chat_active["url"] + "\"></div>");
        chatDiv.appendTo(".bigchat-messages-container");
    }

    if(messages) {
        chatDiv.html("");
        appendMessages(messages, chatDiv);


        scrollDown($(".bigchat-messages-content[data-url='" + chat_active["url"] + "']"));
    }
}

function scrollDown(element) {
    setTimeout(function() {
        element.animate({
            scrollTop: element[0].scrollHeight
        });
    }, 50);
}

function subscribeRoom(url, name, unread) {
    if($("#chat-active-list [data-url='" + url + "']").length == 0) {
        $("#chat-active-list").append('<a href="javascript:void(0)" class="dropdown-item" data-url="' + url + '">' + name + ' <div class="float-end"><i class="fas fa-user text-success"></i>&nbsp;<span class="float-right online-users" data-online-url="' + url + '"></span> <span class="float-right badge bg-danger" data-unread-url="' + url + '">' + (unread ? unread : "") + '</span></div></a>');
    }

    socketChatSession.subscribe(url, function (topic, event) {
        console.log("subscribed " + url);

        if (typeof event == 'string') {
            event = $.parseJSON(event);
        }

        processMessages(topic, event);

        if (event.type == "online") {
            $("[data-online-url='" + topic + "']").html(event.count);
        }
    });
}

function processMessages(topic, event) {
    if(topic == "/chat-ws/control" && event.url) {
        topic = event.url;
    }

    if((event.type == "message" || event.type == "like") && event.chat["private"]) {
        if(topic != room && !ignored[event.user_id] && event.user_id != playerInfo["user_id"]) {
            var unreadDiv = $("[data-unread-url='" + topic + "']");

            var c = parseInt("0" + unreadDiv.html());
            unreadDiv.html(c + 1);

            $("#chat-active-button [data-unread-url]").html("!");
        }
    }

    if (event.type == "message") {
        $.extend(users, event.user);
        appendMessages([event.chat_message], $(".bigchat-messages-content[data-url='" + topic + "']"));

        if(event.chat["private"] && !ignored[event.user_id]) {
            if (window.navigator && window.navigator.vibrate) {
                window.navigator.vibrate([100, 30, 100]);
            }
        }

        scrollDown($(".bigchat-messages-content[data-url='" + topic + "']"));

    } else if (event.type == "like") {
        if(event.user_id == playerInfo.user_id) {
            $("[data-id='" + event.message_id + "'].Selector").attr("class", "Selector selectorFace " + (event.like ? event.like : "none"));
        }

        $("[data-id='" + event.message_id + "'] .bigchat-message-likes").replaceWith(getBigchatMessageLikesDiv({
            "likes": event.likes
        }));

        attachLikePopover($("[data-id='" + event.message_id + "'] .bigchat-message-bottom"));
    }
}

function unsubscribeRoom(room) {
    try {
        socketChatSession.publish("/chat-ws/control", {
            "command": "chat-active-remove-request",
            "playerInfo": playerInfo
        });

        socketChatSession.unsubscribe(room);

        $("#chat-active-list [data-url='" + room + "']").remove();
        if($("#chat-active-button [data-online-url='" + room + "']").length > 0) {
            openChat($("#chat-active-list .dropdown-item").first().data("url"));
        }
    } catch (e) {
        console.error(e);
    }
}

function appendMessages(chat_messages, chatMessagesDiv) {
    for (var i in chat_messages) {
        var chat_message = chat_messages[i];
        var user = users[chat_message["user_id"]];

        if(chat_message.type == "invitation") {
            if(chat_message["user_id"] == playerInfo["user_id"]) {
                chat_message["message"] = "<small><i>Posílám pozvánku do hry " + gameTypes[chat_message["param"]]["name"] + ".</i></small>";
            } else {
                chat_message["message"] = "<small><i>Posílám pozvánku do hry " + gameTypes[chat_message["param"]]["name"] + ".</i></small><a href='" + chat_message["message"] + "' target='_blank' class='btn btn-sm btn-info mt-2'>Otevřít pozvánku</a>";
            }
        }

        var messageDiv = '<div class="bigchat-' + (chat_message["user_id"] == playerInfo["user_id"] ? "me" : "op") + (user["roles"] == "admin" ? " bigchat-admin" : "") + '" data-id="' + chat_message["id"] + '">'
            + '<div class="bigchat-message">'
            + '<div class="bigchat-message-text" data-bs-toggle="tooltip" data-placement="right" title="' + chat_message["date"] + '">'
            + chat_message["message"]
            + '</div>'

            + '</div>'
            + '<div class="bigchat-message-bottom">'
            + '<div class="bigchat-message-user">'
            + '<a href="' + urlList.profile + '/' + chat_message["user_id"] + '" data-placement="bottom" data-user-nick="' + user["nick"] + '" data-user-id="' + chat_message["user_id"] + '" data-avatar=\'' + user["avatar"] + '\' data-pro="' + user["pro"] + '" class="pop">' + user["nick"] + '</a> '
            + '</div>'

            + ' <input type="hidden" value="' + (chat_message["like"] ? chat_message["like"] : 'none') + ' " class="facemocion"/> '

            + getBigchatMessageLikesDiv(chat_message)

            + '</div>'
            + '</div>';

        messageDiv = $(messageDiv);


        attachPopover(messageDiv, "top");
        attachLikePopover(messageDiv);

        chatMessagesDiv.append(messageDiv);

        $(".bigchat-message-text", messageDiv).tooltip();

        var lastMessageDiv = $("div:last-child", chatMessagesDiv);
        $(".facemocion", messageDiv).faceMocion({
            data: {
                "id": chat_message["id"]
            },
            onBefore: isVerified,
            callback: function(obj, data) {

                socketChatSession.publish(room, {
                    "command": "send-like",
                    "playerInfo": playerInfo,
                    "message_id": data.id,
                    "like": data.value != "none" ? data.value : null
                });
            }
        });
    }

    return lastMessageDiv;
}

function getBigchatMessageLikesDiv(chat_message) {
    messageDiv = '<div class="bigchat-message-likes likePop" ';

    var likesNumber = 0;

    if(Object.keys(chat_message["likes"]).length > 0) {

        for (key in chat_message["likes"]) {
            likesNumber += chat_message["likes"][key];
            messageDiv += ' data-emoji-' + key + '="' + chat_message["likes"][key] + '"';
        }

        messageDiv += '>';

        var j = 0;
        for (key in chat_message["likes"]) {
            if(j == 2) break;

            messageDiv += '<div class="selectorFace ' + key + '"></div>'

            j++;
        }

    } else {
        messageDiv += 'style="display:none;">';
    }
    messageDiv += '<div class="likes-number">' + likesNumber +'</div>'
        + '</div>';

    return messageDiv;
}

function sendBigMessage() {
    var sendMessageContent = $("#bigchat-sendmessage-textarea")[0].emojioneArea;
    var text = sendMessageContent.getText();

    sendMessageContent.hidePicker();

    if (text.length > 0) {
        socketChatSession.publish(room, {
            "command": "send-message",
            "playerInfo": playerInfo,
            "message": text
        });

        sendMessageContent.setText('');
    }
}

function attachLikePopover(object) {
    $(".likePop", object).popover({
        trigger: "hover",
        html: true,
        animation: false,
        placement: "top",
        content: function () {
            var popoverDiv = $('<div></div>');

            for (key in $(this).data()) {
                if(key && key.startsWith("emoji")) {
                    popoverDiv.append("<div class='selectorFace " + key.replace("emoji", "").toLowerCase() + "'></div>" + $(this).data(key));
                }
            }

            return popoverDiv;
        }
    });
}