const API_URL = "https://www.thecocktaildb.com/api/json/v1/1";
const API_SEARCH = `${API_URL}/search.php`;

// Almacena un array con todos cócteles.
var cocktails = [];

// Almacena el contador para realizar petición ajax.
var sendAjaxTimer = null;

async function handleOnChangeInputUpdate(e) {
  let target = e.target;
  let search = target.value;

  if (sendAjaxTimer) {
    clearTimeout(sendAjaxTimer);
    sendAjaxTimer = null;
  }

  // Si se ha pulsado Enter, se envía de momento la consulta.
  if (event.which == 13 || event.keyCode == 13) {
    fetchCocktails(search);
  } else {
    // Añado intervalo a la cola para ejecutarse.
    sendAjaxTimer = setTimeout(() => fetchCocktails(search), 800);
  }
}

/**
 * Borra todos los nodos hijos del elemento recibido.
 */
function removeAllChildNodes(parent) {
  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }
}

/**
 * Actualiza el listado de cócteles.
 */
async function updateCocktailsList() {
  const list = document.getElementById("box-posts");
  const template = document.getElementById("news-template");

  // Limpio usuarios actuales de la lista.
  removeAllChildNodes(list);

  cocktails.forEach((cocktail) => {
    const row = template.content.querySelector(".t-box").cloneNode(true);

    const title = row.querySelector(".t-title");
    const tag = row.querySelector(".t-tag");
    const description = row.querySelector(".t-description");
    const image = row.querySelector(".t-img");

    title.textContent = cocktail.strDrink;
    tag.textContent = cocktail.strTags ?? "Generic";
    description.textContent = cocktail.strInstructions;
    image.src = cocktail.strDrinkThumb;

    list.appendChild(row);
  });
}

/**
 * Realiza la petición de datos a la api.
 */
async function fetchCocktails(search = "a") {
  const response = await fetch(`${API_SEARCH}?s=${search}`, {
    method: "GET"
  })
    .then(function (response) {
      return response.json();
    })
    .catch(function (error) {
      console.log("Error en la petición AJAX:", error);

      return null;
    });

  // Almaceno en la variable global todos
  cocktails = response && response.drinks ? response.drinks : null;

  // Actualizo la lista con los cócteles
  updateCocktailsList();

  console.log("FIN consulta Fetch:", cocktails);
}

// Acciones que se realizarán una vez esté cargada la página por completo.
window.document.addEventListener("DOMContentLoaded", () => {
  // Obtiene por primera al cargar la página.
  fetchCocktails();

  // Añado eventos al buscador.
  let sarchInput = document.getElementById("input-search");
  sarchInput.addEventListener("change", handleOnChangeInputUpdate);
  sarchInput.addEventListener("keyup", handleOnChangeInputUpdate);
});