{% 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/api/chat/get_last_message/2'
        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=1`);
    ws.onmessage = function (event) {
        const data = JSON.parse(event.data)
        appendMessage(data.message);
        console.log(data)
    };

    function sendMessage(event) {
        let input = document.getElementById("messageText")
        ws.send(JSON.stringify({'message':input.value, "image_url": 'https://images.black-phoenix.ru/static/images/avatars/0qQOzJcY5lOuuA1u_avatar.png'}))
        input.value = ''
        event.preventDefault()
    }
</script>
{% endblock %}