'use strict';

// socket.io 실행 후 해당객체를 리턴받아 socket 변수에 담는다.
var socket = io(); 
var chatWindow = document.getElementById('chatWindow');
var sendButton = document.getElementById('chatMessageSendBtn');
var chatInput = document.getElementById('chatInput');

// socket 변수를 통해 connect 이벤트에 바인딩
// connect 이벤트는 소켓이 연결되면 호출
socket.on('connect', () => {
    // 사용자명을 입력받아 대화면 저장하기
    // prompt는 window메소드로 사용자가 텍스트를 입력할 수 있는
    // 대화상자를 띄웁니다.
    var name = prompt('대화명을 입력해 주세요.', '');
    // 저장한 name값을 newUserConnect 이벤트를 호출하면서 파라메타로 전달해줍니다.
    socket.emit('newUserConnect', name);
});

// 전달했던 data를 받아서 처리
socket.on('updateMessage', (data) => {

    // 시스템이 날리는 메세지
    if (data.name == 'SERVER') {

        // info DIV 태그에 메세지값을 입력
        var info = document.getElementById('info');
        info.innerHTML = data.message;

        setTimeout(() => {
            info.innerText = '';
        }, 10000);

    // 사람들이 날리는 메세지
    } else {
        // 사용자가 전달한 텍스트는 drawChatMessage()함수를 통해 
        // 객체를 생성해 chatWindow에 삽입
        chatWindow.appendChild(drawChatMessage(data));

        // 항상최신대화 보기 
        // :: chatWindow의 스크롤을 chatWindow 스크롤 높이만큼 내려주자
        chatWindow.scrollTop = chatWindow.scrollHeight;
    }
});

// 채팅은 텍스트 갯수가 계속 늘어나야하기 때문에 객체로 만들어 append 해줍니다.
// data에는 대화명(name)과 메세지(message)가 있습니다.
function drawChatMessage(data) {

    // createElement를 사용하여 태그를 생성

    // 전체를 감싸줄 객체
    var wrap = document.createElement('p');
    // 메세지를 담을 객체 
    var message = document.createElement('span');
    // 대화명을 담을 객체
    var name = document.createElement('span');

    // 태그에 데이터 삽입
    name.innerText = data.name;
    message.innerText = data.message;

    // 객체를 컨트롤 하기위해 class나 id를 추가해 줍니다.
    name.classList.add('output__user__name');
    message.classList.add('output__user__message');
    wrap.classList.add('output__user');

    
    wrap.dataset.id = socket.id;

    // wrap 객체안에 대화명과 메세지를 담은 객체를 넣어주고 wrap객체를 return해줍니다.
    // 리턴된 객체는 updateMessage 채팅창에 넣어줍니다.
    wrap.appendChild(name);
    wrap.appendChild(message);

    return wrap;
}

sendButton.addEventListener('click', () => {

    // 입력한 메세지 처리
    var message = chatInput.value;
    if (!message) return false;

    // 메세지 문자가 있다면 sendMessage 이벤트를 호출하여 파라메타로 전달
    socket.emit('sendMessage', {
        message
    });

    chatInput.value = '';
});

chatInput.addEventListener('keydown', (e) => {

    if (e.keyCode == 13)
    {
        // 입력한 메세지 처리
        var message = chatInput.value;
        if (!message) return false;

        // 메세지 문자가 있다면 sendMessage 이벤트를 호출하여 파라메타로 전달
        socket.emit('sendMessage', {
            message
        });

        chatInput.value = '';
    }
    
});