<% include _header %> 

<h1>Chat feature testing</h1>

<h3>Username: <span id="username"></span></h3>

<p>Send new message to:</p>
<ul id="messages">
    <form id="form" action="">
        <input id="toUsername" name="toUsername" type="text"
            placeholder="username" />
        <input id="input" autocomplete="off" /><input type="submit" value="send" />    
    </form>
</ul>

<h2>Live Chat</h2><p><span id="serverMsg"></span></p>

<h2>Chat History with Doctors</h2><p><span id="msgHistoryDoctors"></span></p>

<h2>Chat History with Patients</h2><p><span id="msgHistoryPatients"></span></p>

<h2>Load Message History with User</h2>
<form id="userMsgHistoryForm" action="">
    <input id="targetUsername" type="text"
        placeholder="username" />
    <input type="submit" value="Load" />
</form>
<p><span id="msgHistoryUser"></span></p>

<h2>Live Senders List: Patients</h2>
<p><span id="patientSendersList"</span></p>

<h2>Live Senders List: Doctors</h2>
<p><span id="doctorSendersList"</span></p>


<script src="/socket.io/socket.io.js"></script>
<% include chatHelpers %> 
<script>
    const socket = io();
    const usernameSpan          =   document.getElementById('username');
    var form                    =   document.getElementById('form');  
    var input                   =   document.getElementById('input');
    var toUsername              =   document.getElementById('toUsername');
    var serverMsgSpan           =   document.getElementById('serverMsg');
    var msgHistoryDoctorsSpan   =   document.getElementById('msgHistoryDoctors');
    var msgHistoryPatientsSpan  =   document.getElementById('msgHistoryPatients');
    var msgHistoryUserSpan      =   document.getElementById('msgHistoryUser');
    var userMsgHistoryForm      =   document.getElementById('userMsgHistoryForm');
    var targetUsername          =   document.getElementById('targetUsername');
    var patientSendersListSpan  =   document.getElementById('patientSendersList');
    var doctorSendersListSpan   =   document.getElementById('doctorSendersList');

    socket.on('connect', () => {
        //socketIdSpan.innerText = socket.id;

        socket.emit('whoami', (username) => {
            console.log('client: username is ' + username);
            usernameSpan.innerText = username;

            form.addEventListener('submit', function(e) {    
                e.preventDefault();    
                if (input.value) {      
                    socket.emit('from message', 
                                    {
                                        socketId: socket.id,
                                        fromUsername: username,
                                        content: input.value,
                                        toUsername: toUsername.value
                                    }
                                );   
                    //reset input field   
                    input.value = '';    
                }  
            });

            userMsgHistoryForm.addEventListener('submit', function(e) {
                e.preventDefault();
                if (targetUsername.value) {
                    socket.emit('target user', 
                            { targetUsername: targetUsername.value });
                }
            });

            
        });
    });

    socket.on('to message', (data) => {
        socket.emit('whoami', (username) => {
            if (username === data.toUsername || username === data.fromUsername) {
                displayMessageString(null, false, data, serverMsgSpan);

            }
        });
    });

    socket.on("load doctor messages", (data) => {
        data.forEach(message => {
            displayMessageString(message.createdAt, true, message, msgHistoryDoctorsSpan);
        });
    });

    socket.on("load patient messages", (data) => {
        data.forEach(message => {
            displayMessageString(message.createdAt, true, message, msgHistoryPatientsSpan);
        });
    });

    socket.on("load messages with user", (data) => {
        msgHistoryUserSpan.innerHTML = ``;
        data.forEach(message => {
            displayMessageString(message.createdAt, true, message, msgHistoryUserSpan);
        });
    });

    socket.on("patients to me", (data) => {
        patientSendersListSpan.innerHTML = ``;
        data.forEach(senderUsername => {
            patientSendersListSpan.innerHTML += `${senderUsername} <br />`;
        });
    });

    socket.on("doctors to me", (data) => {
        doctorSendersListSpan.innerHTML = ``;
        data.forEach(senderUsername => {
            doctorSendersListSpan.innerHTML += `${senderUsername} <br />`;
        });
    });

</script>

<% include _footer %> 