import { getAvatar, getUsers, resolveAliases } from "./atproto"


const users = await getUsers()

let cleared = false

const spinner = document.getElementById("users__spinner")

const list = document.createElement("div")
for (const user of users) {
    if (!user.active) {
        continue;
    }

    if (!cleared) {
        document.querySelector("section.users > p")?.remove()
        cleared = true
    }

    const handleElement = document.createElement("div")
    handleElement.textContent = user.did

    const handle = (await resolveAliases(user.did))?.at(0)?.replace("at://", "") || user.did

    const container = document.createElement("div")
    container.innerHTML = `
        <img src="${await getAvatar(user.did)}" alt="${handle}" />
        <div class="info">
            <a href="https://pdsls.dev/at://${user.did}" class="handle" target="_blank">
                ${handle}
            </a>
        </div>
    `
    list.appendChild(container)
}


const doc = document.querySelector("section.users")
if (!doc) {
    throw new Error("Could not find section.users")
}
doc.appendChild(list)

spinner?.remove()