/*
  But : Créer les cartes pour les afficher dans l'html
  Auteur : Maxime Commergnat
  Date :   20.06.2021 / V1.0 
*/
class AnimeCard {
  constructor(titre, titre_anglais, episode, image, video) {
    this.card = this.createCard(titre, episode, image);

    this.titre = titre;
    this.titre_anglais = titre_anglais;
    this.episode = episode;
    this.image = image;
    this.video = video;

    this.card.addEventListener("click", () => {
      this.createDetails(
        this.titre,
        this.titre_anglais,
        this.episode,
        this.video
      );
    });
  }

  createCard(titre, episode, image) {
    let cardsContainer = document.getElementById("cards-container");

    // Création des éléments à mettre dans le document
    let row = document.createElement("div");
    let col = document.createElement("div");
    let card = document.createElement("div");
    let cardTitle = document.createElement("h4");
    let img = document.createElement("img");
    let cardBody = document.createElement("div");
    let cardText = document.createElement("p");

    // Ajout des attributs à mettre sur chaque élément créé précédement
    row.setAttribute("class", "row mt-5");
    col.setAttribute("class", "col");
    card.setAttribute("class", "card animeCard");
    cardTitle.setAttribute("class", "card-title");
    img.setAttribute("class", "card-img-top");
    img.setAttribute("src", image);
    cardBody.setAttribute("class", "card-body");
    cardText.setAttribute("class", "card-text");

    // Ajout du texte sur certains éléments
    cardTitle.textContent = "Titre : " + titre;
    cardText.innerHTML = `Épisode : ${episode}`;

    // Ajout d'un écouteur sur la carte
    //  card.addEventListener("click", this.createDetails);

    // Ajout des éléments dans le document
    cardsContainer.appendChild(row);
    row.appendChild(col);
    col.appendChild(card);
    card.appendChild(cardTitle);
    card.appendChild(img);
    card.appendChild(cardBody);
    cardBody.appendChild(cardText);

    return card;
  }

  createDetails(titre, titre_anglais, episode, videoUrl) {
    // Suppression de l'ancienne carte si elle existe.
    $("#card-details").remove();

    // Création du lien de streaming
    let streamingUrl = "https://voiranime.com/anime/";

    /*
    Remplace chaque caractère spéciale par un espace, puis sépare le titre en 
    plusieurs chaînes de caractères qui seront placées dans la liste de chaînes 
    de caractères "titreMorceaux"
    */
    let titreMorceaux = titre.replace(/[^\w\s]/gi, " ").split(" ");

    // Ajoute dans une nouvelle liste, chaque élément qui n'est pas égale à ""
    titreMorceaux = titreMorceaux.filter((morceau) => morceau !== "");

    /*
    Boucle permetant de rajouter les tirets entre chaque mot sauf pour le 
    dernier qui aura un "/"
    */
    for (let i = 0; i < titreMorceaux.length; i++) {
      let morceau = titreMorceaux[i].toLowerCase();

      if (i !== titreMorceaux.length - 1) {
        morceau += "-";
        streamingUrl += morceau;
      } else {
        morceau += "/";
        streamingUrl += morceau;
      }
    }

    // Affichage du lien dans la console dévelopeur
    console.log(streamingUrl);

    // Création de chaque éléments
    let cardsContainerRow = document.getElementById("cards-container-row");
    let cardDetails = document.createElement("div");
    let card = document.createElement("div");
    let video = document.createElement("video");
    let cardBody = document.createElement("div");
    let listGroup = document.createElement("ul");
    let itemTitle = document.createElement("li");
    let itemAlias = document.createElement("li");
    let itemEpisode = document.createElement("li");
    let itemStreamingUrl = document.createElement("li");
    let streamingUrlLink = document.createElement("a");

    // Ajout des attributs pour chaque balise de la carte des détails
    cardDetails.setAttribute("id", "card-details");
    cardDetails.setAttribute("class", "col");
    card.setAttribute("class", "card w-100");
    video.setAttribute("class", "card-img-top");
    video.setAttribute("src", videoUrl);
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    cardBody.setAttribute("class", "card-body");
    listGroup.setAttribute("class", "list-group list-group-flush");
    itemTitle.setAttribute("class", "list-group-item");
    itemAlias.setAttribute("class", "list-group-item");
    itemEpisode.setAttribute("class", "list-group-item");
    itemStreamingUrl.setAttribute("class", "list-group-item");
    streamingUrlLink.setAttribute("href", streamingUrl);
    streamingUrlLink.setAttribute("target", "_blank");

    // Ajout des valeurs pour les détails
    itemTitle.textContent = `Titre : ${titre}`;
    itemAlias.textContent = `Titre anglais : ${titre_anglais}`;
    itemEpisode.textContent = `Épisode : ${episode}`;
    streamingUrlLink.textContent = `Voiranime : ${streamingUrl}`;

    // Ajout des éléments dans les balises appropriées
    cardsContainerRow.appendChild(cardDetails);
    cardDetails.appendChild(card);
    card.appendChild(video);
    card.appendChild(listGroup);
    listGroup.appendChild(itemTitle);
    listGroup.appendChild(itemAlias);
    listGroup.appendChild(itemEpisode);
    listGroup.appendChild(itemStreamingUrl);
    itemStreamingUrl.appendChild(streamingUrlLink);
  }
}
