function parseDate(date) {
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
    return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() + ' ' + date.toLocaleTimeString();
  }

function parseComment(data) {
    const html = `
    <div class="comment">
        <a class="pfp">
        
        </a>
        <span>
            <span class="bold mtext">${data.firstname + ' ' + data.lastname}</span>
            <p class="mtext">${data.content}</p>
        </span>
    </div>
    `
    return html
}

function parsePost(post, likes) {
    const html = `
    <div class="post" postid=${post.id}>
        <div class="postheader">
            <a class="pfp">
                
            </a>
            <div class="postname">
                <span class="bold">${post.author.firstname + ' ' + post.author.lastname}</span>
                <span class="gtext mtext">${parseDate(new Date(post.time))}</span>
            </div>
        </div>
        <p class="mtext">
            ${post.content}
        </p>
        <span class="gtext mtext">
                ${post.likes} Likes
        </span>
        <div class="fullline nb"></div>
        <div class="postbuttons">
            <span onclick="like(this)">
                <i class="icons like ${likes.includes(post.id) ? 'blue' : ''}"></i>
                <span class="bold ${likes.includes(post.id) ? 'blue' : ''}">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 id="comments">
            <div class="fullline" style="margin-top: 0"></div>
            ${post.comments.map(parseComment).join('')}
            <div class="comment">
                <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(id) {
    for (let i = 0; i < data.posts.length; i++) {
        if (data.posts[i].id === id) {
            return i
        }
    }
    return -1
}

function like(span) {
    const id = parseInt(span.parentElement.parentElement.getAttribute('postid'))
    const index = data.user.likes.indexOf(id)
    if (index === -1) {
        data.user.likes.push(id)
        data.posts[getPost(id)].likes++
    } else {
        data.user.likes.splice(index, 1)
        data.posts[getPost(id)].likes--
    }
    load()
}

function comment(event) {
    event.preventDefault();
    const text = event.target.elements.text.value.trim();
    if (text.length < 1) return;
    const id = parseInt(event.target.parentElement.parentElement.parentElement.getAttribute('postid'))
    var index = getPost(id);
    console.log(index)
    if (index === -1) return;
    data.posts[index].comments.push({
        firstname: data.user.firstname,
        lastname: data.user.lastname,
        content: text
    })
    load()
}

function post(event) {
    const text = document.getElementById("text").value.trim()
    if (text.length < 1) return;
    data.posts.unshift({
        id: data.posts[0].id + 1,
        author: {
            firstname: data.user.firstname,
            lastname: data.user.lastname
        },
        time: Date.now(),
        content: text,
        likes: 0,
        comments: []
    })
    load()
}

function load() {
    const html = `
    <div id="posts">
        <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>
        ${data.posts.map(p => parsePost(p, data.user.likes)).join('')}
    </div>
    `
    
    add(html, 'posts')

    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>and ho
                    <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>
            <button class="primary" onclick="post(this)">Post</button>
        </div>
    </div>
    `

    add(popup, 'popup')
}

var data = {
    user: {
        firstname: 'John',
        lastname: 'Doe',
        likes: [1]
    },
    posts: [
        {
            id: 1,
            author: {
                firstname: 'Joe',
                lastname: 'Biden',
            },
            time: 1674269687905,
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            likes: 2,
            comments: [],
        },
        {
            id: 0,
            author: {
                firstname: 'Amazon',
                lastname: 'Employee',
            },
            time: 0,
            content: 'I dont like working at amazon >:(', 
            likes: 69,
            comments: [
                {
                    firstname: 'Jeff',
                    lastname: 'Bezos',
                    content: 'You\'re fired.'
                },
            ],
        }
    ]
}

header(true, false)
load();