{% extends "app.html" %}

{% block header_text %}<h2 style="color:#fff">Threads</h2>{% endblock %}

{% block main %}
<section class="chat-area" id="chat">
    <div class="chat-header">&nbsp;</div>
    <div class="threads">
        {% for thread in threads %}
        {% autoescape false %}
        <a href="/channel/{{thread.uid}}.html" style="max-width:100%;" data-uid="{{thread.uid}}" data-color="{{thread.last_message_user_color}}" data-channel_uid="{{thread.uid}}"
            data-name="{{thread.name}}" data-created_at="{{thread.created_at}}" data-user_uid="{{thread.user_uid}}"
            class="thread">
            <div class="avatar" style="opacity: 1; background-color: {{thread.last_message_user_color}}; color: black;"><img
                    src="/avatar/{{thread.last_message_user_uid}}.svg" /></div>
            <div class="message-content">
                <div class="author" style="opacity: 1; color: {{thread.name_color}};">{{thread.name}}</div>
                <div class="text">{% autoescape false %}{% emoji %}{% linkify %}{% markdown %}{% autoescape false %}{{ thread.last_message_text }}{%raw %} {% endraw%}{%endautoescape%}{% endmarkdown %}{% endlinkify %}{% endemoji %}{%
                    endautoescape %}</div>
                <div class="time opacity: 1; no-select" data-created_at="{{thread.created_at}}"></div>
            </div>
        </a>

        {% endautoescape %}
        {% endfor %}
    </div>
    <chat-window style="display:none" class="chat-area"></chat-window>
</section>

<script type="module">
    import { app } from "/app.js";

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


    const threadsContainer = document.querySelector(".chat-threads");

    function updateLayout(doScrollDown) {
        updateTimes();
    }

    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 threadsContainer = document.querySelector(".chat-threads");

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

    updateLayout(true);
</script>
{% endblock %}