{% extends "app.html" %} 
{% block main %}
    <section class="chat-area" id="chat">
    <div class="chat-header"><h2>{{ channel.label.value }}</h2></div>
    <div class="chat-messages">
        
        {% for message in messages %}
        {% autoescape false %}
        {{message.html}}
        {% endautoescape %}
        <div style="display:none" class="message {% if loop.first or message.username != messages[loop.index0 - 1].username %}switch-user{% endif %}" data-uid="{{message.uid}}" data-color="{{message.color}}" data-user_nick="{{message.user_nick}}" data-created_at="{{message.created_at}}">
                <div class="avatar no-select" style="background-color: {{message.color}}; color: black;">{{message.user_nick[0]}}</div> 
            <div class="message-content">
        {% autoescape false %}
                {{ message.html }}
            
        {% endautoescape %}
            <div class="time no-select" data-created_at="{{message.created_at}}">{{message.created_at}}</div>
            </div>
        </div>
        {% endfor %}
    </div>
    <chat-window style="display:none" class="chat-area"></chat-window>
    <div class="chat-input">
      <textarea placeholder="Type a message..." rows="2"></textarea>
      <upload-button channel="{{channel.channel_uid.value}}"></upload-button>
    </div>
    </section>
    <script>
        const channelUid = "{{channel.channel_uid.value}}"

        function initInputField(textBox){

            textBox.addEventListener('change', (e) => {
      e.preventDefault();
      this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));

    });

    textBox.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        const message = e.target.value.trim();
        if (!message) return;
            app.rpc.sendMessage(channelUid, e.target.value)
          e.target.value = '';
      }
    });
        }
        initInputField(document.querySelector("textarea"))
        function updateTimes(){
        document.querySelectorAll(".time").forEach((time) => {
                time.innerText = app.timeDescription(time.dataset.created_at)
        })
        }
        function updateLayout() {

             document.querySelectorAll(".chat-messages").forEach((messages) => messages.scrollTop = messages.scrollHeight + 1000)
            //document.querySelectorAll(".chat-messages .message:last-child").forEach((message) => message.scrollIntoView({block: "end"}))      
            updateTimes()
            let previousUser = null;
            document.querySelectorAll(".message").forEach((message) => {
                if(previousUser != message.dataset.user_uid) {
                    message.classList.add("switch-user")
                    previousUser = message.dataset.user_uid
                }else{
                    message.classList.remove("switch-user")
                }
            })
        }
         setInterval(() => {
                
            
                updateTimes()

            }, 1000)

        app.addEventListener("channel-message", (data) => {
            if(data.channel_uid != channelUid) return
            if(data.username != "{{user.username.value}}"){
                app.playSound(0)
            }
            const message = document.createElement("div")
            //message.classList.add("message")
            message.dataset.color = data.color
            message.dataset.created_at = data.created_at
            message.dataset.user_nick = data.user_nick
            message.dataset.uid = data.uid
            message.innerHTML = data.html
            document.querySelector(".chat-messages").appendChild(message.firstChild)
            setTimeout(()=>{
            updateLayout()
            },50)
        })
        updateLayout()
                //.scrollTop = document.querySelector(".chat-messages").scrollHeight + 5000
       // })
    </script>
{% endblock %}