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 movieDeleteButtonClicked(e) {
  console.log(e.target);
  const movieId = parseInt(e.target.id.split("-")[3]);
  await moviesApiEndpoint.deleteObject(movieId);
  await loadMoviesTableData();
}

async function movieEditButtonClicked(e) {}

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>
        <td>
          <span class="d-flex justify-content-around">
            <a href="#"><i class="bi bi-pen movie-button-edit" id="movie-button-edit-${movie.id}"></i></a>
            <a href="#"><i class="bi bi-trash movie-button-delete" id="movie-button-delete-${movie.id}"></i></a>
          </span>
        </td>
			</tr>`;
  }
  const movieEditButtons = document.getElementsByClassName("movie-button-edit");
  const movieDeleteButtons = document.getElementsByClassName(
    "movie-button-delete"
  );
  for (let i = 0; i < movieDeleteButtons.length; i++) {
    movieDeleteButtons[i].addEventListener("click", movieDeleteButtonClicked);
    movieEditButtons[i].addEventListener("click", movieEditButtonClicked);
  }
}