{% extends "app.html" %}

{% block title %}Search{% endblock %}

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

{% block main %}
<section class="chat-area">
    <div class="chat-header">
        <h2>Search user</h2>
    </div>
    <div class="container chat-area">
        <form method="get" action="/search-user.html">
            <input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
            <fancy-button size="auto" text="Search" url="submit"></fancy-button>
        </form>
        <div class="threads">
            {% for user in users %}
        <a href="/channel/{{user.uid}}.html" style="max-width:100%;" data-uid="{{user.uid}}" data-color="{{user.color}}" data-channel_uid="{{user.uid}}"
                                                                                                                         data-username="{{user.username}}" data-nick="{{user.nick}}" data-last_ping="{{user.last_ping}}" 
            class="thread">
            <div class="avatar" style="opacity: 1; background-color: {{user.color}}; color: black;"><img
                    src="/avatar/{{user.uid}}.svg" /></div>
            <div class="message-content">
                <div class="author" style="opacity: 1; color: {{user.color}};">{{user.nick}}</div>
                <div class="text">{% autoescape false %}{% emoji %}{% linkify %}{% markdown %}{% autoescape false %}{%raw %}{% endraw%}{%endautoescape%}{% endmarkdown %}{% endlinkify %}{% endemoji %}{%
                    endautoescape %}</div>
                <div class="time opacity: 1; no-select" data-created_at="{{user.last_ping}}">{{user.last_ping}}</div>
            </div>
        </a>



            {% endfor %}
    </div>

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

    document.querySelector("[name=query]").focus();

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


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

    function updateLayout(doScrollDown) {
        updateTimes();
    }

    setInterval(updateTimes, 1000);

    function isMentionToMe(message) {
        const mentionText = '@{{ current_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 = '@{{ current_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 !== "{{ current_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 %}