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

@*<link rel="stylesheet" href="~/css/chat.css" />*@

<script src="~/js/signalr-client.js"></script>

<script>
        function hubConnection(url) {
            var ws = new WebSocket(url);
            var id = 0;
            var calls = {};
            var methods = {};

            ws.onopen = function () {
                console.log('Opened!');
            };

            ws.onmessage = function (event) {

                let response = {};

                //if (document.getElementById('formatType').value == 'line') {
                //    let parts = event.data.split(',');
                //    if (event.data[0] == 'R') {
                //        response.Id = parts[0].slice(2);
                //        response.Result = parts[1].slice(1);
                //    }
                //    else if (event.data[0] == 'C') {
                //        response.Method = parts[1].slice(1);
                //        response.Arguments = parts.slice(2).join();
                //    }
                //    else {
                //        response.error = parts[0].slice(1);
                //    }
                //}
                //else {
                    response = JSON.parse(event.data);
                //}

                // Response
                if (response.Id) {
                    var cb = calls[response.Id];

                    delete calls[response.Id];

                    if (response.Error) {
                        cb.error(response.Error);
                    }
                    else {
                        cb.success(response.Result);
                    }
                }
                else {
                    // Reverse JSON RPC
                    methods[response.Method](response.Arguments);
                }
            };

            ws.onclose = function (event) {
                console.log('Closed!');
            };

            this.invoke = function (method, args, formatType) {
                return new Promise((resolve, reject) => {
                    calls[id] = { success: resolve, error: reject };
                    if (formatType == 'line') {
                        ws.send(`CI${id},M${method},${args.join()}\n`);
                    }
                    else {
                        ws.send(JSON.stringify({ method: method, arguments: args, id: id }));
                    }
                    id++;
                });
            };

            this.on = function (method, fn) {
                methods[method] = fn;
            };
        }


        document.addEventListener('DOMContentLoaded', () => {
            let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');

            connection.on('Send', function (message) {
                var child = document.createElement('li');
                child.innerText = message;
                document.getElementById('messages').appendChild(child);
            });

            connection.start();

            document.getElementById('sendmessage').addEventListener('submit', event => {
                let data = document.getElementById('new-message').value;

                connection.invoke('ChatSample.Hubs.Chat.Send', data, 'json').catch(err => {
                    var child = document.createElement('li');
                    child.style.color = 'red';
                    child.innerText = err;
                    document.getElementById('messages').appendChild(child);
                });

                event.preventDefault();
            });
        });
</script>

<div id="chat-area">
    <ul id="messages"></ul>
    <ul id="users"></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>