function parseComment(comment) {
    let author = data.users[comment[0]]
    if (author === undefined) {
        author = {}
    }
    const html = `
    <div class="comment">
        <a class="pfp">
        
        </a>
        <span>
            <span class="bold mtext">${author.firstname + ' ' + author.lastname}</span>
            <p class="mtext">${comment[1]}</p>
        </span>
    </div>
    `
    return html
}

function parsePost(post) {
    let author = data.users[post.user_id]
    if (author === undefined) {
        author = {}
    }
    const html = `
    <div class="post" postid=${post.post_id}>
        <div class="postheader">
            <a class="pfp" href=/profile?id=${author.user_id}>
                
            </a>
            <div class="postname">
                <span class="bold">${author.firstname + ' ' + author.lastname}</span>
                <span class="gtext mtext">${parseDate(new Date(post.date))}</span>
            </div>
        </div>
        <p class="mtext" style="color: var(--text);">
            ${post.content.replace(/\n/g,'<br>')}
        </p>
        <span class="gtext mtext likes">
                ${post.likes.length} Likes
        </span>
        <div class="fullline nb"></div>
        <div class="postbuttons">
            <span class="likeclicky" onclick="like(this)">
                <i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
                <span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'bltext' : ''}">Like</span>
            </span>
            <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
                <i class="icons comm"></i>
                <span class="bold">Comment</span>
            </span>
        </div>
        <div class="comments">
            <div class="fullline" style="margin-top: 0"></div>
                ${post.comments.map(parseComment).join('')}
            <div class="comment commentsubmit">
                <a class="pfp" href="profile">
                
                </a>
                <form onsubmit="comment(event)">
                    <input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment">
                </form>
            </div>
        </div>
    </div>  
    `
    return html
}

function getPost(post_id) {
    for (let i = 0; i < data.posts.length; i++) {
        if (data.posts[i].post_id === post_id) {
            return i
        }
    }
    return -1
}

async function like(span) {
    const container = span.parentElement.parentElement;
    const id = parseInt(container.getAttribute('postid'))
    const post = data.posts[getPost(id)]
    const index = post.likes.indexOf(data.user.user_id)
    const current = index !== -1
    const response = await postlike(id, !current)
    if (response.status != 200) return;
    if (current) {
        post.likes.splice(index, 1)
    } else {
        post.likes.push(data.user.user_id)
    }
    const buttons = container
        .getElementsByClassName("postbuttons")[0]
        .getElementsByClassName("likeclicky")[0]
        .getElementsByClassName("liketoggle")
    if (current) {
        buttons[0].classList.remove("blue")
        buttons[1].classList.remove("bltext")
    } else {
        buttons[0].classList.add("blue")
        buttons[1].classList.add("bltext")
    }
    container.getElementsByClassName("likes")[0].innerHTML = post.likes.length + " Likes"
}

async function comment(event) {
    event.preventDefault();
    const text = event.target.elements.text.value.trim();
    if (text.length < 1) return;
    const container = event.target.parentElement.parentElement.parentElement;
    const post_id = parseInt(container.getAttribute('postid'))
    var index = getPost(post_id);
    if (index === -1) return;
    const response = await postcomment(post_id, text)
    if (response.status != 200) return;
    event.target.elements.text.value = '';
    let new_comment = [data.user.user_id, text]
    data.posts[index].comments.push(new_comment)
    let comments = container.getElementsByClassName("comments")[0]
    prepend(parseComment(new_comment), comments, comments.getElementsByClassName("commentsubmit")[0])
}

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.user.user_id,
        date: Date.now(),
        content: text,
        likes: [],
        comments: []
    }
    data.posts.unshift(post)
    let html = parsePost(post)
    prepend(html, posts_block)
    document.getElementById('popup').classList.add('hidden')
}

async function loadMore() {
    const posts = await load()
    data.posts.push(... posts)
    const posts_block = document.getElementById("posts")
    for (p of posts) {
        append(parsePost(p), posts_block)
    }
}

function render() {
    const html = `
    <div id="create">
        <div class="create">
            <a class="pfp" href="profile">
                    
            </a>
            <button class="pfp">
                <p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')">
                    What's on your mind, ${data.user.firstname}?
                </p>
            </button>
        </div>
    </div>
    <div id="posts">
        ${data.posts.map(p => parsePost(p)).join('')}
    </div>
    `
    
    append(html)

    const popup = `
    <div id="popup" class="hidden">
        <div class="createpost">
            <div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
            <span class="ltext ctext bold">Create post</span>
            <div class="fullline"></div>
            <div class="postheader">
                <a class="pfp" style="cursor: auto">
                    
                </a>
                <div class="postname">
                    <span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>
                    <span class="gtext mtext">Now</span>
                </div>
            </div>
            <textarea type="text" name="text" id="text" placeholder="What's on your mind, ${data.user.firstname}?"></textarea>
            <span class="error ctext" style="padding-bottom: 15px; margin-top: -30px;"></span>
            <button class="primary" onclick="post(this)">Post</button>
        </div>
    </div>
    `

    append(popup)

    const load = `
    <div id="load">
        <a class="bold gtext" onclick="loadMore()">Load more posts</a>
    </div>
    `

    append(load)
}

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

async function load() {
    const posts = (await loadpostspage(page)).json
    if (posts.length === 0) {
        page = -1
        remove('load')
        return []
    } else {
        page++
    }
    const batch = []
    for (const post of posts) {
        for(const comment of post.comments) {
            if (data.users[comment[0]] !== undefined) continue
            if (batch.includes(comment[0])) continue
            batch.push(comment[0])
        }
        if (data.users[post.user_id] !== undefined) continue
        if (batch.includes(post.user_id)) continue
        batch.push(post.user_id)
    }
    const users = batch.length == 0 ? [] : (await loadusers(batch)).json
    for (const user of users) {
        data.users[user.user_id] = user
    }
    return posts
}

async function init() {
    header(true, false)
    data.user = (await loadself()).json
    data.users[data.user.user_id] = data.user
    const posts = await load()
    data.posts.push(... posts)
    render()
}