//
// let senderName = localStorage.getItem('senderName');
// if (!senderName) {
//   localStorage.setItem('senderName', senderName);
// }
//
//
// }
// let form = document.getElementById('form')
// form.addEventListener('submit', (e) => {
//   e.preventDefault()
//   let message = e.target.message.value
//   chatSocket.send(JSON.stringify({
//     'message': message,
//     'sender': senderName
//   }))
//   form.reset()
// })




// let url = `ws://localhost:8000/ws/socket-server/`;
//
// const chatSocket = new WebSocket(url);

// chatSocket.onmessage = function (e) {
//   let data = JSON.parse(e.data)
//   console.log('Data: ', data)
// }

// chatSocket.onopen = function () {
//     console.log("open")
// }
// // function open_socket () {
// chatSocket.onopen = function(){
//     console.log("open")
//     // chatSocket
// }
// }

// var i = 0
const chatSocket = new WebSocket(ws_url);


function sendMessageSocket (data) {
    chatSocket.send(JSON.stringify(data));
    if (!data.ticket_id){
        let el_tab = document.querySelector(".tab_user_messanger.select")
        if (el_tab !== null){
            el_tab.querySelector(".last-message-messenger-user-tab").innerHTML = data['text']
        }
    }
}


chatSocket.onmessage = function (e) {
    let el_tab = document.querySelector(".tab_user_messanger.select")
    let old_item_tab_user = null;
    if (el_tab !== null){
        let dataset = el_tab.dataset;
        old_item_tab_user = dataset['curReceiverItem'];
    }
    let data = JSON.parse(e.data);
    console.log('Data:', data);
    console.log("return")
    let msg_cont = document.querySelector(".container-messages")
    if (data.type === 'chat') {
        document.querySelector(".container-messages").innerHTML = data.html;
        document.querySelector(".enter-message-inp").focus()
    } else if (data.type === "echo") {
        console.log(data)
    } else if (data.type === "update_chat") {
        let msg_cont = document.querySelector(".container-messages")
        if (data.chat_html){
            if (msg_cont !== null){
                if (msg_cont.dataset['curReceiver'] === ""){
                    document.querySelector(".fotter-chat")
                    msg_cont.innerHTML = data.chat_html
                } else {
                    // что бы не выводился левый чат
                    if (msg_cont.dataset['curReceiver'] === data['sender'].toString() || msg_cont.dataset['curReceiver'] === data['receiver'].toString()) {
                        msg_cont.innerHTML = data.chat_html
                    }
                }
            }
        }
        if (data.tickets_w_manager_html) {
            if (document.querySelector(".list_linked_tickets") !== null || document.querySelector(".list_unlinked_tickets") !== null) {
                document.querySelector(".list_linked_tickets").innerHTML = data.tickets_w_manager_html
                if (el_tab !== null){
                    document.querySelector(".tab_user_messanger.select").classList.remove("select")
                    let old_insert_tab = document.querySelector(`[data-cur-receiver-item="${old_item_tab_user}"]`)
                    if (old_insert_tab) {
                        old_insert_tab.classList.add("select")
                        old_insert_tab.scrollIntoView({behavior: "smooth"});
                    }

                }
                let container_messenger = document.querySelector(".container-messages")
                if (container_messenger){
                    let dataset_cont_mes = container_messenger.dataset
                    if (dataset_cont_mes){
                        let ticket_id = dataset_cont_mes["ticketId"]
                        if (ticket_id !== ""){
                            let ticket = document.querySelector(`[data-cur-receiver-item="${ticket_id}"]`)
                            if (!ticket){
                                let chat = document.querySelector(".block-chat").innerHTML = ""
                            }
                        }
                    }
                }
            }

        }
        if (data.tickets_wo_manager_html) {
            if (document.querySelector(".list_linked_tickets") !== null || document.querySelector(".list_unlinked_tickets") !== null) {
                document.querySelector(".list_unlinked_tickets").innerHTML = data.tickets_wo_manager_html
                if (el_tab !== null) {
                    let select_tab = document.querySelector(".tab_user_messanger.select")
                    if (select_tab) {
                        select_tab.classList.remove("select")
                    }
                    let old_insert_tab = document.querySelector(`[data-cur-receiver-item="${old_item_tab_user}"]`)
                    if (old_insert_tab) {
                        old_insert_tab.classList.add("select")
                        old_insert_tab.scrollIntoView({behavior: "smooth"});
                    }

                }
                let container_messenger = document.querySelector(".container-messages")
                if (container_messenger){
                    let dataset_cont_mes = container_messenger.dataset
                    if (dataset_cont_mes){
                        let ticket_id = dataset_cont_mes["ticketId"]
                        if (ticket_id !== ""){
                            let ticket = document.querySelector(`[data-cur-receiver-item="${ticket_id}"]`)
                            if (!ticket){
                                let chat = document.querySelector(".block-chat").innerHTML = ""
                            }
                        }
                    }
                }
            }

        }
         else {
            let list_of_users = document.querySelector(".block-list-of-users")
            if (list_of_users !== null){
                if (data.users_list_html){
                    list_of_users.innerHTML = data.users_list_html
                    if (el_tab !== null){
                        document.querySelector(`[data-cur-receiver-item="${old_item_tab_user}"]` ).classList.add("select")
                    }
                }

            }
        }


    } else if (data.type === "update_support_chat"){
        if (msg_cont !== null){
            if (msg_cont.dataset['curReceiver'] === ""){
                document.querySelector(".info_profile").innerHTML = data.support_chat_html
            }
        }
    }
    if (data.unread_msgs_count > 0){
        let list_unrd = document.querySelectorAll(".qs")
        let i = 0
        for (i;i < list_unrd.length;i++){
            list_unrd[i].innerHTML = data.unread_msgs_count.toString()
        }
    }
    if (data.required_beep === true) {
        const beep = new Audio('/static/sounds/beep_2.mp3')
        beep.play()

    }
}


// let url = `ws://localhost:8000/ws/socket-server/`;
//
// const chatSocket = new WebSocket(url);
//
// chatSocket.onmessage = function (e) {
//   let data = JSON.parse(e.data)
//   console.log('Data: ', data)
//
//   if (data.type === 'chat') {
//     // let messages = document.getElementById('messages')
//     //
//     // messages.insertAdjacentHTML('beforeend', `<div>
//     //                                             <p>${data.message}</p>
//     //                                           </div>`
//     // )
//       document.querySelector(".container-messages").innerHTML = data.html;
//       document.querySelector(".enter-message-inp").focus()
//   }
//
// }

// function send_ws_msg(data) {
//     chatSocket.send(JSON.stringify(data));
// }

// window.onload = function () {
//
//     let btn = document.querySelector(".send-message")
//
//     btn.addEventListener('click', (e) => {
//       e.preventDefault()
//       // let message = e.target.message.value
//       chatSocket.send(JSON.stringify({
//         'data':'data'
//       }))
//       // btn.reset()
//     })
// }
// let form = document.getElementById('form')