@{
    ViewData["Title"] = "Chat";
}

<div id="chat-area">
    <ul id="messages"></ul>
    <ul id="users">
        <li><b>Users online</b></li>
    </ul>
    <div class="clear">
    </div>
    <form id="sendmessage" action="#">
        <input type="text" id="new-message" />
        <input type="submit" id="send" value="Send" class="send" />
    </form>
</div>
<script src="lib/signalr-client/signalr-client-1.0.0-alpha1.js"></script>
<script>
let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
let logger = new signalR.ConsoleLogger(signalR.LogLevel.Information);
let http = new signalR.HttpConnection(`http://${document.location.host}/chat`, { transport: transportType, logger: logger });
let connection = new signalR.HubConnection(http, logger);

connection.onClosed = e => {
    if (e) {
        appendLine('Connection closed with error: ' + e, 'red');
    }
    else {
        appendLine('Disconnected', 'green');
    }
};

connection.on('SetUsersOnline', usersOnline => {
    usersOnline.forEach(user => addUserOnline(user));
});

connection.on('UsersJoined', users => {
    users.forEach(user => {
        appendLine('User ' + user.Name + ' joined the chat');
        addUserOnline(user);
    });
});

connection.on('UsersLeft', users => {
    users.forEach(user => {
        appendLine('User ' + user.Name + ' left the chat');
        document.getElementById(user.ConnectionId).outerHTML = '';
    });
});

connection.on('Send', (userName, message) => {
    var nameElement = document.createElement('b');
    nameElement.innerText = userName + ':';

    var msgElement = document.createElement('span');
    msgElement.innerText = ' ' + message;

    var child = document.createElement('li');
    child.appendChild(nameElement);
    child.appendChild(msgElement);
    document.getElementById('messages').appendChild(child);
});

connection.start().catch(err => appendLine(err, 'red'));

document.getElementById('sendmessage').addEventListener('submit', event => {
    let data = document.getElementById('new-message').value;
    connection.invoke('Send', data).catch(err => appendLine(err, 'red'));
    event.preventDefault();
});

function appendLine(line, color) {
    let child = document.createElement('li');
    if (color) {
        child.style.color = color;
    }
    child.innerText = line;
    document.getElementById('messages').appendChild(child);
};

function addUserOnline(user) {
    if (document.getElementById(user.ConnectionId)) {
        return;
    }
    var userLi = document.createElement('li');
    userLi.innerText = `${user.Name} (${user.ConnectionId})`;
    userLi.id = user.ConnectionId;
    document.getElementById('users').appendChild(userLi);
}

function getParameterByName(name, url) {
    if (!url) {
        url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
};

</script>