var socket = io();


/* 접속 되었을 때 실행 */
socket.on('connect', function() {
  /* 이름을 입력받고 */

  /* 서버에 새로운 유저가 왔다고 알림 */
  socket.emit('newUser')
})

/* 서버로부터 데이터 받은 경우 */
socket.on('update', function(data) {
    var chat = document.getElementById('chat')

    var message = document.createElement('div')
    var node;
    if(data.name != "SERVER"){
        node = document.createTextNode(`${data.name}: ${data.message}`)
    }
    else{
        node = document.createTextNode(`${data.message}`)
    }
    var className = ''

    // 타입에 따라 적용할 클래스를 다르게 지정
    switch(data.type) {
      case 'message':
        className = 'other'
        break

      case 'connect':
        className = 'connect'
        break

      case 'disconnect':
        className = 'disconnect'
        break
    }

    message.classList.add(className)
    message.appendChild(node)
    chat.appendChild(message)

    function a(chat = 'chat'){
      var element = document.getElementById(chat);
      element.scrollTop = element.scrollHeight - element.clientHeight;
    }
    a();
})

/* 메시지 전송 함수 */
function send() {
  // 입력되어있는 데이터 가져오기
  var message = document.getElementById('test').value
  
  // 공백이 아닐때
  if(!(message.replace(/\s| /gi, "").length == 0)){
    // 가져왔으니 데이터 빈칸으로 변경
    document.getElementById('test').value = ''

    // 내가 전송할 메시지 클라이언트에게 표시
    var chat = document.getElementById('chat')
    var msg = document.createElement('div')
    var node = document.createTextNode(message)
    msg.classList.add('me')
    msg.appendChild(node)
    chat.appendChild(msg)

    // 서버로 message 이벤트 전달 + 데이터와 함께

    socket.emit('message', {type: 'message', message: message})
  } else{
  alert("내용을 입력해주세요.");
}

  function a(chat = 'chat'){
    var element = document.getElementById(chat);
    element.scrollTop = element.scrollHeight - element.clientHeight;
  }
  a();
  
}

function enterkey() {
  if (window.event.keyCode == 13) {
       // 엔터키가 눌렸을 때 실행할 내용
       send();
  }
}