// retoor <retoor@molodetz.nl>

import { Avatar } from "./Avatar.js";

const ROSTER_TOPIC = "public.presence.roster";

export class OnlineUsers {
    constructor(pubsub) {
        this.list = document.querySelector("[data-online-users-list]");
        if (!this.list) return;
        this.countEl = document.querySelector("[data-online-count]");
        this.emptyText = this.list.dataset.emptyText || "No one online right now";
        if (pubsub) {
            pubsub.subscribe(ROSTER_TOPIC, (data) => this.render(data));
        }
    }

    render(roster) {
        if (!roster || !Array.isArray(roster.users)) return;
        if (this.countEl) {
            this.countEl.textContent = roster.count != null ? roster.count : roster.users.length;
        }
        this.list.textContent = "";
        if (!roster.users.length) {
            const empty = document.createElement("span");
            empty.className = "online-empty";
            empty.textContent = this.emptyText;
            this.list.appendChild(empty);
            return;
        }
        for (const user of roster.users) {
            this.list.appendChild(this.buildItem(user));
        }
    }

    buildItem(user) {
        const link = document.createElement("a");
        link.href = "/profile/" + user.username;
        link.className = "online-user";
        link.title = user.username;
        link.appendChild(Avatar.badgeElement(user));
        return link;
    }
}
