import { getMovies } from './rest_api';

export async function renderMovies() {
    const moviesSection = document.querySelector('#movies');
    const moviesContainer = moviesSection.querySelector('.row');

    const seriesSection = document.querySelector('#series');
    const seriesContainer = seriesSection.querySelector('.row');

    moviesContainer.innerHTML = '';
    seriesContainer.innerHTML = '';

    const movies = await getMovies();
    movies.forEach((movie) => {
        console.log(movie.id);
        console.log(movie.requiresSubscription);

        const movieTemplate = `
            <div class="col-6 col-lg-3">                        
                <a href="videoplayer.html?id=${movie.id}" class="text-decoration-none">
                    <img src="${movie.poster}" class="img-fluid film-poster" alt="">
                    <h5 class="text-black mt-3">${movie.title}</h5>
                    <h6 class="text-secondary">${movie.requiresSubscription === true ? 'По подписке' : 'Бесплатно'}</h6>
                </a>
            </div>
        `;

        if (movie.type === 'Фильм') {
            moviesContainer.innerHTML += movieTemplate;
        } else if (movie.type === 'Сериал') {
            seriesContainer.innerHTML += movieTemplate;
        }
    });
}

export default renderMovies;