import { div, body, span, parse } from './main.js'
import { loadself, loaduserspage } from './api.js'
import { header, parseUser } from './components.js'

function render() {
    
    let new_body = 
    body({},
        ...header(false, true, false, data.self.user_id),
        div({id: 'users'},
            ...data.users.map(u => parseUser(u))
        ),
        div({id: 'load'},
            span({class: 'bold gtext', onclick: async () => {
                let users = await load()

                let el = document.getElementById("users")
                for (const user of users) {
                    el.appendChild(parseUser(user))
                }
            }},
                parse("Load more users")
            )
        )
    )

    document.body.replaceWith(new_body)
}

var page = 0
const data = {
    users: [],
    self: {}
}

async function load() {

    const users = (await loaduserspage(page)).json

    if (users.length === 0) {
        document.getElementById('load').remove()
        return []
    } else {
        page++
    }
    return users
}

async function init() {

    let request = (await loadself());
    if (request.json == undefined) {
        location.href = '/login'
        return
    }

    data.self = request.json

    const users = await load()
    data.users.push(... users)

    render()
}

init()