<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Votign Session</title>
    </head>
    <body>
        <textarea id="chat-log" cols="100" rows="20"></textarea><br />
        <input id="chat-message-input" type="text" size="100" /><br />
        <input id="chat-message-submit" type="button" value="Send" />
        {{ room_name|json_script:"room-name" }}
        <script>
            const roomName = JSON.parse(
                document.getElementById("room-name").textContent,
            );

            const host =
                "ws://" +
                window.location.host +
                "/voting/session/" +
                roomName +
                "/";
            const chatSocket = new WebSocket(host);
            console.log(host);

            chatSocket.onmessage = function (e) {
                const data = JSON.parse(e.data);
                document.querySelector("#chat-log").value +=
                    data.message + "\n";
            };

            chatSocket.onclose = function (e) {
                console.error("Chat socket closed unexpectedly");
            };

            document.querySelector("#chat-message-input").focus();
            document.querySelector("#chat-message-input").onkeyup = function (
                e,
            ) {
                if (e.key === "Enter") {
                    // enter, return
                    document.querySelector("#chat-message-submit").click();
                }
            };

            document.querySelector("#chat-message-submit").onclick = function (
                e,
            ) {
                const messageInputDom = document.querySelector(
                    "#chat-message-input",
                );
                const message = messageInputDom.value;
                chatSocket.send(
                    JSON.stringify({
                        action: "message",
                        message: message,
                    }),
                );
                messageInputDom.value = "";
            };
        </script>
    </body>
</html>
