/**
 * App Chat
 */

"use strict";

document.addEventListener("DOMContentLoaded", function () {
    (function () {
        const chatContactsBody = document.querySelector(
                ".app-chat-contacts .sidebar-body"
            ),
            chatContactListItems = [].slice.call(
                document.querySelectorAll(
                    ".chat-contact-list-item:not(.chat-contact-list-item-title)"
                )
            ),
            chatHistoryBody = document.querySelector(".chat-history-body"),
            chatSidebarLeftBody = document.querySelector(
                ".app-chat-sidebar-left .sidebar-body"
            ),
            chatSidebarRightBody = document.querySelector(
                ".app-chat-sidebar-right .sidebar-body"
            ),
            chatUserStatus = [].slice.call(
                document.querySelectorAll(
                    ".form-check-input[name='chat-user-status']"
                )
            ),
            chatSidebarLeftUserAbout = $(".chat-sidebar-left-user-about"),
            formSendMessage = document.querySelector(".form-send-message"),
            messageInput = document.querySelector(".message-input"),
            searchInput = document.querySelector(".chat-search-input"),
            speechToText = $(".speech-to-text"), // ! jQuery dependency for speech to text
            userStatusObj = {
                active: "avatar-online",
                offline: "avatar-offline",
                away: "avatar-away",
                busy: "avatar-busy",
            };

        // Initialize PerfectScrollbar
        // ------------------------------

        // Chat contacts scrollbar
        if (chatContactsBody) {
            new PerfectScrollbar(chatContactsBody, {
                wheelPropagation: false,
                suppressScrollX: true,
            });
        }

        // Chat history scrollbar
        if (chatHistoryBody) {
            new PerfectScrollbar(chatHistoryBody, {
                wheelPropagation: false,
                suppressScrollX: true,
            });
        }

        // Sidebar left scrollbar
        if (chatSidebarLeftBody) {
            new PerfectScrollbar(chatSidebarLeftBody, {
                wheelPropagation: false,
                suppressScrollX: true,
            });
        }

        // Sidebar right scrollbar
        if (chatSidebarRightBody) {
            new PerfectScrollbar(chatSidebarRightBody, {
                wheelPropagation: false,
                suppressScrollX: true,
            });
        }

        // Scroll to bottom function
        function scrollToBottom() {
            //chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
        }
        //scrollToBottom();

        // User About Maxlength Init
        if (chatSidebarLeftUserAbout.length) {
            chatSidebarLeftUserAbout.maxlength({
                alwaysShow: true,
                warningClass: "label label-success bg-success text-white",
                limitReachedClass: "label label-danger",
                separator: "/",
                validate: true,
                threshold: 120,
            });
        }

        // Update user status
        chatUserStatus.forEach((el) => {
            el.addEventListener("click", (e) => {
                let chatLeftSidebarUserAvatar = document.querySelector(
                        ".chat-sidebar-left-user .avatar"
                    ),
                    value = e.currentTarget.value;
                //Update status in left sidebar user avatar
                chatLeftSidebarUserAvatar.removeAttribute("class");
                Helpers._addClass(
                    "avatar avatar-xl " + userStatusObj[value] + "",
                    chatLeftSidebarUserAvatar
                );
                //Update status in contacts sidebar user avatar
                let chatContactsUserAvatar = document.querySelector(
                    ".app-chat-contacts .avatar"
                );
                chatContactsUserAvatar.removeAttribute("class");
                Helpers._addClass(
                    "flex-shrink-0 avatar " + userStatusObj[value] + " me-3",
                    chatContactsUserAvatar
                );
            });
        });

        // Select chat or contact
        chatContactListItems.forEach((chatContactListItem) => {
            // Bind click event to each chat contact list item
            chatContactListItem.addEventListener("click", (e) => {
                // Remove active class from chat contact list item
                chatContactListItems.forEach((chatContactListItem) => {
                    chatContactListItem.classList.remove("active");
                });
                // Add active class to current chat contact list item
                e.currentTarget.classList.add("active");
            });
        });

        // Filter Chats
        if (searchInput) {
            searchInput.addEventListener("keyup", (e) => {
                let searchValue = e.currentTarget.value.toLowerCase(),
                    searchChatListItemsCount = 0,
                    searchContactListItemsCount = 0,
                    chatListItem0 = document.querySelector(".chat-list-item-0"),
                    contactListItem0 = document.querySelector(
                        ".contact-list-item-0"
                    ),
                    searchChatListItems = [].slice.call(
                        document.querySelectorAll(
                            "#chat-list li:not(.chat-contact-list-item-title)"
                        )
                    ),
                    searchContactListItems = [].slice.call(
                        document.querySelectorAll(
                            "#contact-list li:not(.chat-contact-list-item-title)"
                        )
                    );

                // Search in chats
                searchChatContacts(
                    searchChatListItems,
                    searchChatListItemsCount,
                    searchValue,
                    chatListItem0
                );
                // Search in contacts
                searchChatContacts(
                    searchContactListItems,
                    searchContactListItemsCount,
                    searchValue,
                    contactListItem0
                );
            });
        }

        // Search chat and contacts function
        function searchChatContacts(
            searchListItems,
            searchListItemsCount,
            searchValue,
            listItem0
        ) {
            searchListItems.forEach((searchListItem) => {
                let searchListItemText =
                    searchListItem.textContent.toLowerCase();
                if (searchValue) {
                    if (-1 < searchListItemText.indexOf(searchValue)) {
                        searchListItem.classList.add("d-flex");
                        searchListItem.classList.remove("d-none");
                        searchListItemsCount++;
                    } else {
                        searchListItem.classList.add("d-none");
                    }
                } else {
                    searchListItem.classList.add("d-flex");
                    searchListItem.classList.remove("d-none");
                    searchListItemsCount++;
                }
            });
            // Display no search fount if searchListItemsCount == 0
            if (searchListItemsCount == 0) {
                listItem0.classList.remove("d-none");
            } else {
                listItem0.classList.add("d-none");
            }
        }

        // Send Message
        formSendMessage.addEventListener("submit", (e) => {
            e.preventDefault();
            if (messageInput.value) {
                $(".msg-send")
                    .html(`<div class="spinner-border spinner-border-sm waves-effect waves-light"
            role="status">
            <span class="visually-hidden">Loading...</span>
        </div>`);
                const baseUrl = $('meta[name="base-url"]').attr("content");
                const userProfile = $('meta[name="user-profile"]').attr(
                    "content"
                );
                const nameUser = $('body').find('.user-name').text();

                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                            "content"
                        ),
                    },
                });
                try {
                    $.ajax({
                        type: "POST",
                        url: baseUrl + "/customer/helpline/send",
                        data: { message: messageInput.value },
                        dataType: "JSON",
                        success: function (response) {
                            let profileImg = $('#profileImage img').attr('src');
                            let userMsg = `<div class="message-left">
                          <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                              <img class="avatar" src="${profileImg}" alt="avatar" />
                              <span class="message-title">${nameUser}</span>
                              <span class="text">${response.data.time}</span>
                            </div>
                          </div>
                          <div class="message-box">
                            <p class="text">${messageInput.value}</p>
                          </div>
                        </div>`;
                            let renderMsg = document.createElement("div");
                            renderMsg.className = "chat-message-text mt-2";
                            if (response.status == "success") {
                                $(".chat-history").append(userMsg);
                                messageInput.value = "";
                            } else {
                                alert(response.msg);
                            }
                        },
                    });
                } catch (error) {
                    alert(error.message);
                }
                scrollToBottom();
                $(".msg-send").html(`Send`);
            }
        });

        // on click of chatHistoryHeaderMenu, Remove data-overlay attribute from chatSidebarLeftClose to resolve overlay overlapping issue for two sidebar
        let chatHistoryHeaderMenu = document.querySelector(
                ".chat-history-header [data-target='#app-chat-contacts']"
            ),
            chatSidebarLeftClose = document.querySelector(
                ".app-chat-sidebar-left .close-sidebar"
            );
        chatHistoryHeaderMenu.addEventListener("click", (e) => {
            chatSidebarLeftClose.removeAttribute("data-overlay");
        });
        // }

        // Speech To Text
        if (speechToText.length) {
            var SpeechRecognition =
                SpeechRecognition || webkitSpeechRecognition;
            if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
                var recognition = new SpeechRecognition(),
                    listening = false;
                speechToText.on("click", function () {
                    const $this = $(this);
                    recognition.onspeechstart = function () {
                        listening = true;
                    };
                    if (listening === false) {
                        recognition.start();
                    }
                    recognition.onerror = function (event) {
                        listening = false;
                    };
                    recognition.onresult = function (event) {
                        $this
                            .closest(".form-send-message")
                            .find(".message-input")
                            .val(event.results[0][0].transcript);
                    };
                    recognition.onspeechend = function (event) {
                        listening = false;
                        recognition.stop();
                    };
                });
            }
        }
    })();
});
