import { ApiEndpoint } from "./apiendpoint";
import { Modal } from "bootstrap";

const moviesApiEndpoint = new ApiEndpoint("movies");
const categoriesApiEndpoint = new ApiEndpoint("categories");

document.addEventListener("DOMContentLoaded", loadMoviesTableData());

const modal = document.getElementById("modal-movie");
const myModal = modal ? new Modal(modal, {}) : null;

myModal.show();

async function loadMoviesTableData() {
  const movies = await moviesApiEndpoint.getObjects();
  const category = await categoriesApiEndpoint.getObjects();
  const tableWrapper = document.getElementById("movie-table-body");
  tableWrapper.innerHTML = "";

  for (let i = 0; i < movies.length; i++) {
    const movie = movies[i];
    const movieCategory = await categoriesApiEndpoint.getObject(
      movie.categoryId
    );
    tableWrapper.innerHTML += `
			<tr>
				<td>${movie.id}</td>
				<td>${movie.name}</td>
				<td>${movieCategory.name}</td>
				<td>${movie.description}</td>
				<td>${movie.duration}</td>
			</tr>`;
  }
}