const posts = [
    {
        name: "Vincent van Gogh",
        username: "vincey1853",
        location: "Zundert, Netherlands",
        avatar: "images/avatar-vangogh.jpg",
        post: "images/post-vangogh.jpg",
        comment: "just took a few mushrooms lol",
        likes: 21
    },
    {
        name: "Gustave Courbet",
        username: "gus1819",
        location: "Ornans, France",
        avatar: "images/avatar-courbet.jpg",
        post: "images/post-courbet.jpg",
        comment: "i'm feelin a bit stressed tbh",
        likes: 4
    },
        {
        name: "Joseph Ducreux",
        username: "jd1735",
        location: "Paris, France",
        avatar: "images/avatar-ducreux.jpg",
        post: "images/post-ducreux.jpg",
        comment: "gm friends! which coin are YOU stacking up today?? post below and WAGMI!",
        likes: 152
    }
]


const postsEl = document.getElementById("posts-el")
var postArray

for (i = 0; i < posts.length ; i++) {


postArray = Object.entries(posts[i])    // sets the variable postArray to an array of 7 arrays of keys and values of the array [posts] ([name, value], [username, value],[ ...]) of index i
    
let screenName = postArray[0]                // sets the variable screenName to an array of the initial index of [postArray] ([name, value])               
let screenNameValue = screenName[1]         // sets the variable screenNameValue to the value of the array [screenName] (Vincent van Gogh for example)

let userName = postArray[1]                 // sets the variable userName to an array of the second [1] index of [postArray] ([username, value])
let userNameValue = userName[1]             //......................................................................... (vincey1853 for example)

let location = postArray[2]
let locationValue = location[1]

let avatar = postArray[3]
let avatarValue = avatar[1]

let post = postArray[4]
let postValue = post[1]

let comment = postArray[5]
let commentValue = comment[1]

let likes = postArray[6]
let likesValue = likes[1]


postsEl.innerHTML += `<div class="post-container">

                        <section>
                            <div class="user-container">
                                <span id="avatar"><img src="${avatarValue}" alt="${screenNameValue} avatar" class="avatar"></span>
                                <div class="user-data">
                                    <p><span>${screenNameValue}</span></p>
                                    <p><span id="location">${locationValue}</span></p>
                                </div>
                            </div>
                        </section>

                        <section>
                            <div class="img-container">
                                <img src="${postValue}" alt="picture posted by ${screenNameValue}" id="post${i}" class="img-container">
                            </div>
                        </section> 


                        <section>
                            <div class="bottom-container">
                                <img src="images/icon-heart.png" alt="heart icon" class="icons" id="heart${i}">
                                <img src="images/icon-comment.png" alt="comment icon" class="icons">
                                <img src="images/icon-dm.png" alt="direct message icon" class="icons">
                                <br>
                                <p class="bold"><span id="likes${i}">${likesValue}</span> likes</p>
                                <p><span id="username" class="bold">${userNameValue}</span><span id="comment"> ${commentValue}</span></p>
                            </div>
                        </section>

                    </div>`

    






}





document.getElementById("heart0").addEventListener("click", likeIncrease0)
document.getElementById("heart1").addEventListener("click", likeIncrease1)
document.getElementById("heart2").addEventListener("click", likeIncrease2)
document.getElementById("post0").addEventListener("dblclick", likeIncrease0)
document.getElementById("post1").addEventListener("dblclick", likeIncrease1)
document.getElementById("post2").addEventListener("dblclick", likeIncrease2)

function likeIncrease0() {
    console.log("clicked")
    let postArray = Object.entries(posts[0])
    let likes = postArray[6]
    let likesValue = likes[1]
    likesValue += 1
    let likesEl = document.getElementById("likes0")
    likesEl.innerText = likesValue
    posts.splice(0, 1,  {name: "Vincent van Gogh",
                        username: "vincey1853",
                        location: "Zundert, Netherlands",
                        avatar: "images/avatar-vangogh.jpg",
                        post: "images/post-vangogh.jpg",
                        comment: "just took a few mushrooms lol",
                        likes: likesValue})
    console.log(posts)
    
}

function likeIncrease1() {
    console.log("clicked")
    let postArray = Object.entries(posts[1])
    let likes = postArray[6]
    let likesValue = likes[1]
    likesValue += 1
    let likesEl = document.getElementById("likes1")
    likesEl.innerText = likesValue
    posts.splice(1, 1,  {name: "Gustave Courbet",
                        username: "gus1819",
                        location: "Ornans, France",
                        avatar: "images/avatar-courbet.jpg",
                        post: "images/post-courbet.jpg",
                        comment: "i'm feelin a bit stressed tbh",
                        likes: likesValue})
}

function likeIncrease2() {
    console.log("clicked")
    let postArray = Object.entries(posts[2])
    let likes = postArray[6]
    let likesValue = likes[1]
    likesValue += 1
    let likesEl = document.getElementById("likes2")
    likesEl.innerText = likesValue
    posts.splice(2, 1, {name: "Gustave Courbet",
                        username: "gus1819",
                        location: "Ornans, France",
                        avatar: "images/avatar-courbet.jpg",
                        post: "images/post-courbet.jpg",
                        comment: "i'm feelin a bit stressed tbh",
                        likes: likesValue})
}