const ageSelector = document.getElementById("age-selector")
const genreSelector = document.getElementById("genre-selector")

const btn = document.getElementById("btn")
const suggestedMovie = document.getElementById("suggested-movie")
const movieReview = document.getElementById("movie-review")

console.log(movieReview)

btn.addEventListener("click", renderMovies)


const moviesArr = [
    {
        name: "Die Hard",
        age: "18+",
        genre: "Action",
        reviews: " ⭐ ⭐ ⭐ ⭐ ⭐"
    },
    {
        name: "Love Actually",
        age: "18+",
        genre: "Romance",
        reviews: " ⭐ ⭐ ⭐ ⭐"
    },
    {
        name: "The Polar Express",
        age: "PG",
        genre: "Action",
        reviews: " ⭐ ⭐ ⭐ ⭐  "
    },
    {
        name: "Shrek",
        age: "PG",
        genre: "Romance",
        reviews: " ⭐ ⭐ ⭐ ⭐ ⭐"
    }, {
        name: "Citizen Kane ",
        age: "PG",
        genre: "White & Black",
        reviews: " ⭐ ⭐ ⭐ "
    },  {
        name: "The Best Years of Our Lives",
        age: "18+",
        genre: "White & Black", 
        reviews: " ⭐ ⭐ ⭐ ⭐ ⭐" 
    }
    
]

// Task: 
// - Write a function to select a suitable movie based on the age group and genre provided.
//  - Display it in the suggested-movie paragraph when the button is clicked.

function renderMovies () {
    const selectAge = ageSelector.value
    console.log(selectAge)
    const selectMovie = genreSelector.value
    console.log(selectMovie)
    for(let i = 0; i < moviesArr.length; i++) {
        if (moviesArr[i].age === selectAge && moviesArr[i].genre === selectMovie) {
            suggestedMovie.textContent = `Movie Name: ${moviesArr[i].name}`
            movieReview.textContent = ` Reviews: ${moviesArr[i].reviews}`
            
        }
    }
    
}


// Stretch goals: 
// - Have the function run on each change of the <select> tags.
// - Add more movies/complexity - for example black and white vs color, preferred actors, etc.