{% extends "base.html" %}

{% block content %}
<div class="flex flex-col items-center">
    <h1>WebSocket Chat</h1>
    <h2>Your ID: <span id="ws-id"></span></h2>
    <form action="" onsubmit="sendMessage(event)">
        <input class="bg-green-300" type="text" id="messageText" autocomplete="off"/>
        <button>Send</button>
    </form>
    <ul id='messages'>
</ul>
</div>
<script>
    async function getLastMessages() {
        const url = 'http://localhost:8000/chat/last_messages'
        const response = await fetch(url, {
            method: 'GET'
        })
        return response.json()
    }

    getLastMessages()
        .then(messages => {
            appendMessage("Предыдущие 5 сообщений:")
            messages.forEach(msg => {
                appendMessage(msg.message)
            })
            appendMessage("\nНовые сообщения:")
        })

    function appendMessage(msg) {
        let messages = document.getElementById('messages')
        let message = document.createElement('li')
        let content = document.createTextNode(msg)
        message.appendChild(content)
        messages.appendChild(message)
    }

    let chat_id = 2
    document.querySelector("#ws-id").textContent = chat_id;
    let ws = new WebSocket(`ws://localhost:8000/chat/ws/${chat_id}?user_id=2`);
    ws.onmessage = function (event) {
        appendMessage(event.data)
    };

    function sendMessage(event) {
        let input = document.getElementById("messageText")
        ws.send(input.value)
        input.value = ''
        event.preventDefault()
    }
</script>
{% endblock %}