{% load static %}

<!DOCTYPE html>



<html lang="en">
    <head>
    <title>ArborHub messenger</title>
        <link rel="icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <style>
        #messageLog {
            height: 300px;
            background-color: #FFFFFF;
            resize: none;
        }

        #onlineArboristSelector {
            height: 300px;
        }
    </style>
</head>
<body>

    <textarea id='chat-text' cols='80' rows='30'></textarea>

    <div id='hello-world'></div>

    <div class="container mt-3 p-5">
        <h2>ArborHub messenger</h2>
        <div class="row">
            <div class="col-12 col-md-8">
                <div class="mb-2">
                    <label for="messageLog">Room: #{{ room.name}}</label>
                    <textarea class="form-control" id="messageLog" readOnly></textarea>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" id="channelMessage" placeholder="Message here">
                    <div class="input-group-append">
                        <button class="btn btn-success" id="sendMessage" type="button">Send</button>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
               <label for="onlineArboristSelector">Online arborists</label>
                <select multiple class="form-control" id="onlineArboristSelector">
                </select>
            </div>
        </div>
    </div>
{{ room_name|json_script:'room-name'}}
    <script>
        document.querySelector('#sendMessage').onclick = function (e) {
            const messageInputDom = document.querySelector('#channelMessage');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message,
            }));

            function editMessage(messageId, newMessage) {
                websocket.send(JSON.stringify({
                    'type': 'edit_message',
                    'message_id': messageId,
                    'new_message': new Message
                }));
            }

            websocket.onmessaage = function(event) {
                const data = JSON.parse(event.data);
                if (dataa.type === 'message_edited') {
                    const messageId = data.message_id;
                    const newMessage = data.new_message;

                }
            }
            messageInputDom.value = '';
        };
        const roomName = JSON.parse(document.getElementById('room-name').textContent);

        const chatSocket = new WebSocket(
            'ws://' +
            location.host +
            '/ws/arborchat/' +
            roomName +
            '/'
        );

        chatSocket.onmessage = function (e) {
            const data = JSON.parse(e.data);
            console.log("Received message:", data);
            const messageLog = document.querySelector('#messageLog');
            messageLog.value += data.message + '\n';
        }
    </script>
</body>

</html>