document.addEventListener('DOMContentLoaded', async () => {
    await loadmovie();
});

async function loadmovie() {
    fetch("/api/movies")
    .then(response => response.json())
    .then(data => { rendermovie(data); });
}

function splitByTitle(movies) {
    result = movies.reduce(function (r, a) {
        var letter = a.title[0].toUpperCase();
        r[letter] = r[letter] || [];
        r[letter].push(a);
        return r;
    }, Object.create(null));

    return result;
}

function splitByDate(movies) {
    result = movies.reduce(function (r, a) {
        var year = new Date(a.released).getFullYear();
        r[year] = r[year] || [];
        r[year].push(a);
        return r;
    }, Object.create(null));

    return result;
}

function createMElement(movie) {
    var row = document.createElement("div");
        row.className = "col";

        row.innerHTML = "<div class='card shadow-sm'>"+
                            "<img class='card-img-top' src="+ movie.webImg + " width='100%'>" +
                            "<div class='card-body'>" +
                                "<h5 class='card-title'>"+ movie.title + "</h5>" +
                                "<p class='card-text'>"+ movie.released + "</p>" +
                                // "<p class='card-text'>"+ movie.genre + "</p>" +
                            "</div>" +
                        "</div>";

    return row;
}

function createHeader(title) {
    var row = document.createElement("div");
        row.className = "row";

        row.innerHTML = "<div class='col'>" +
                            "<h2 class='text-center'>" + title + "</h2>" +
                        "</div>";

    return row;
}
   

function sortMoviesAlphabetically(movies) {
    movies.sort(function(a, b) {
        return a.title.localeCompare(b.title);
    });
}

function sortMoviesByDate(movies) {
    movies.sort(function(a, b) {
        aJ = Date.parse(a.released);
        bJ = Date.parse(b.released);
        return bJ - aJ;
    });
}

function rendermovie(movies) {
    split = splitByTitle(movies);

    body = document.getElementById("movie_tbody");

    for (var key in split) {

        var header = createHeader(key);
        body.append(header);

        movies = document.createElement("div");
        movies.className = "row row-cols-3 row-cols-sm-3 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3";

        split[key].forEach(function(movie) {
            var row = createMElement(movie);
            movies.append(row);
        });

        body.append(movies);
    }

}