import { div, pfp, p, parse, button, body, a, textarea, span, crawl } from './main.js'
import { loadself, loadpostspage, createpost, loadusers } from './api.js'
import { parsePost, header } from './components.js'

async function post() {
    const text = document.getElementById("text").value.trim()
    const error = document.getElementsByClassName('error')[0]
    const posts_block = document.getElementById("posts")
    if (text.length < 1) return;
    const response = await createpost(text);
    if (response.status != 201) {
        error.innerHTML = response.msg
        return;
    }
    error.innerHTML = '';
    let post = {
        post_id: response.json.post_id,
        user_id: data.self.user_id,
        date: Date.now(),
        content: text,
        likes: [],
        comments: []
    }
    data.posts.unshift(post)
    let html = parsePost(post, data.users, data.self)
    
    posts_block.insertBefore(
        html,
        posts_block.firstChild
    )

    document.getElementById('popup').classList.add('hidden')
}

function render() {

    let new_body = 
    body({},
        ...header(true, false, false, data.self.user_id),
        div({id: 'create'}, 
            div({class: 'create'}, 
                a({class: 'pfp', href: '/profile'},
                    pfp(data.self.user_id)
                ),
                button({class: 'pfp'},
                    p({class: 'gtext', onclick: () => document.getElementById('popup').classList.remove('hidden')},
                        parse(`What's on your mind, ${data.self.firstname}`)
                    )
                )
            )
        ),
        div({id: 'posts'},
            ...data.posts.map(p => parsePost(p, data.users, data.self))
        ),
        div({id: 'popup', class: 'hidden'},
            div({class: 'createpost'},
                div({class: 'close', onclick: () => document.getElementById('popup').classList.add('hidden')}),
                span({class: 'ltext ctext bold'},
                    parse('Create post')
                ),
                div({class: 'fullline'}),
                div({class: 'postheader'},
                    a({class: 'pfp', style: 'cursor: auto', href: '/profile'},
                        pfp(data.self.user_id)
                    ),
                    div({class: 'postname'},
                        span({class: 'bold'},
                            parse(data.self.firstname + ' ' + data.self.lastname)
                        ),
                        span({class: 'gtext mtext'},
                            parse('Now')
                        )
                    )
                ),
                textarea({type: 'text', name: 'text', id: 'text', placeholder: `What's on your mind, ${data.self.firstname}?`}),
                span({class: 'error ctext', style: 'padding-bottom: 15px; margin-top: -30px'}),
                button({class: 'primary', onclick: post},
                    parse('Post')
                )
            )
        ),
        div({id: 'load'},
            span({class: 'blod gtext', onclick: async () => {

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

                const el = document.getElementById("posts")

                for (const post of posts) {
                    el.appendChild(
                        parsePost(post, data.users, data.self)
                    )
                }
            }},
                parse('Load more posts')
            )
        )
    )
    
    document.body.replaceWith(new_body)

}

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

async function load() {
    const posts = (await loadpostspage(page)).json

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

    const batch = Array.from(new Set(crawl('user_id', posts))).filter(id => data.users[id] == undefined)

    if (batch.length != 0) {
        const users = (await loadusers(batch)).json
        for (const user of users) {
            data.users[user.user_id] = user
        }
    }

    return posts
}

async function init() {

    let request = (await loadself());
    data.self = request.json

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

    data.users[data.self.user_id] = data.self

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

    render()
}


init()