{% 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 %}
        {% 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.uid.value }}"></upload-button>
    </div>
</section>

<script>
    const channelUid = "{{ 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) {
                    app.rpc.sendMessage(channelUid, message);
                    e.target.value = '';
                }
            }
        });
        textBox.focus();
    }

    function updateTimes() {
        document.querySelectorAll(".time").forEach((time) => {
            time.innerText = app.timeDescription(time.dataset.created_at);
        });
    }

    function isElementVisible(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
    
    const messagesContainer = document.querySelector(".chat-messages");

    function isScrolledPastHalf() {
        let scrollTop = messagesContainer.scrollTop;
        let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;

        if (scrollTop < scrollableHeight / 2) {
            return true;
        }
        return false;
    }

    let isLoadingExtra = false;

    async function loadExtra() {
        const firstMessage = messagesContainer.querySelector(".message:first-child");
        if (isLoadingExtra) {
            return;
        }
        if (!isScrolledPastHalf()) {
           return;
        }
        
        isLoadingExtra = true;
        
        const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);

        messages.forEach((message) => {
            firstMessage.insertAdjacentHTML("beforebegin", message.html);
        })
        updateLayout(false);

        isLoadingExtra = false;
    }

    messagesContainer.addEventListener("scroll", () => {
        loadExtra();
    });

    function updateLayout(doScrollDown) {
        const messagesContainer = document.querySelector(".chat-messages");
        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");
            }
        });
        lastMessage = messagesContainer.querySelector(".message:last-child");
        if (doScrollDown) { 
            lastMessage.scrollIntoView({ inline: "nearest" });
        }
    }

    setInterval(updateTimes, 1000);

    function isMentionToMe(message){
        const mentionText = '@{{ user.username.value }}';
        return message.toLowerCase().includes(mentionText);
    }
    function extractMentions(message) {
        return [...new Set(message.match(/@\w+/g) || [])];
    }
    function isMentionForSomeoneElse(message){
        const mentions = extractMentions(message);
        const mentionText = '@{{ user.username.value }}';
        return mentions.length > 0 && mentions.indexOf(mentionText) == -1;
    }
    
    app.addEventListener("channel-message", (data) => {
        if (data.channel_uid !== channelUid) {
            if(!isMentionForSomeoneElse(data.message)){
                channelSidebar.notify(data);
                app.playSound("messageOtherChannel");
            }
            
            return;
        }
        if (data.username !== "{{ user.username.value }}") {
            if(isMentionToMe(data.message)){
                app.playSound("mention");
            }else if (!isMentionForSomeoneElse(data.message)){
                app.playSound("message");
            }
        }
        
        const messagesContainer = document.querySelector(".chat-messages");
        const lastMessage = messagesContainer.querySelector(".message:last-child"); 
        const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);

        const message = document.createElement("div");
        message.innerHTML = data.html;
        document.querySelector(".chat-messages").appendChild(message.firstChild);
        updateLayout(doScrollDownBecauseLastMessageIsVisible);
        setTimeout(() => {
            updateLayout(doScrollDownBecauseLastMessageIsVisible)
        }, 1000);
    });

    initInputField(document.querySelector("textarea"));
    updateLayout(true);
</script>
{% endblock %}