//
// 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

// function sendMessageSocket (data) {
//     let chatSocket = new WebSocket(url);
//     chatSocket.onopen = function (){
//         console.log("open")
//         chatSocket.send(JSON.stringify(data))
//     }
//     chatSocket.onclose = function () {
//         console.log("close")
//         return false
//     }
//     //
//
//     // }
//     // open_socket()
//     // chatSocket.OPEN
//
//     // chatSocket.onopen = function (){
//     //     console.log("open")
//     //
//
//
//     // }
// }

//
// chatSocket.onmessage = function (e) {
//     let data = JSON.parse(e.data);
//     console.log('Data:', data);
//     console.log("return")
//     if (data.type === 'chat'){
//         document.querySelector(".container-messages").innerHTML = data.html;
//         document.querySelector(".enter-message-inp").focus()
//     }
// }


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()
  }

}

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')