{% extends "dm/base.html" %}


{% block content %}

<style>
    #message-container {
        height: 200px !important;
        overflow-y: scroll;
    }
    .my-3 {
        margin: 1.2rem auto;
    }
    .w-35 {
        width: 35%;
    }
    .mr-0 {
        margin-right: 0 !important;
    }
    .ml-0 {
        margin-left: 0 !important;
    }
    .bg-primary {
        background-color: #007cae !important;
    }
    .bg-secondary {
        background-color: #ccc !important;
    }
    .text-white {
        color: #fff !important;

    }
    .rounded {
        border-radius: .2rem;
    }
    .px-1 {
        padding: 0.2rem 0.6rem 0.2rem 0.6rem;
    }
   
</style>

Channel - {{ object.id }}


<h1>Channel Messages</h1>

<div id='message-container'>
    {% for message in object.channelmessage_set.all %}
        <div class='my-3 w-35 px-1 rounded {% if request.user == message.user %}mr-0 bg-primary text-white {% else %}bg-secondary ml-0{% endif %}'>
            
        <b>{{ message.user }}</b>

        <p>{{ message.content }}</p>
        </div>
    {% endfor %}
</div>


<h1>Channel Users</h1>
{% for channel_user in object.channeluser_set.all %}
<div>
    
{{ channel_user.user }} {% if request.user == channel_user.user %}this is you  {% endif %}
</div>

{% endfor %}

<form id='message-form' action="{{ request.path }}" method='POST'> {% csrf_token %}
{{ form.as_p }}
<input type='submit' value='Message' />
</form>

<script>
    // async javascript request
    const msgForm = document.getElementById("message-form")
    const msgContainer = document.getElementById("message-container")
    
    function scrollBottom (el){
        el.scrollTop = el.scrollHeight
    }
    scrollBottom(msgContainer)

    msgForm.addEventListener("submit", (event)=>{
        event.preventDefault()
        const targetData = event.target
        const formData = new FormData(targetData)
        const xhr = new XMLHttpRequest() // fetch
        const endpoint = msgForm.getAttribute("action")
        const method = msgForm.getAttribute("method")
        xhr.open(method, endpoint)
        //
        xhr.responseType = 'json'
        xhr.setRequestHeader("HTTP_X_REQUESTED_WITH", "XMLHttpRequest")
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
        xhr.onload = () => {
            // const myJsonResponse = JSON.parse(xhr.response)
            // console.log(xhr.status, xhr.response)
            if (xhr.status === 201) {
                const responseData = xhr.response
                let currentMsgHtml = msgContainer.innerHTML
                currentMsgHtml += `<div class='my-3 w-35 px-1 rounded mr-0 bg-primary text-white'><b>${responseData.username}</b><p>${responseData.content}</p></div>`
                msgContainer.innerHTML = currentMsgHtml
                scrollBottom(msgContainer)
                msgForm.reset()
            } else if (xhr.status === 400) {
                console.log(xhr.response)
            } else {
                alert("An error occurred. Please try again later.")
            }
        }

        xhr.send(formData)
    })
</script>

{% endblock %}