// https://www.themealdb.com/api/json/v1/1/random.php

const getMealBtn = document.getElementById("get_meal");
const lastMealBtn = document.getElementById("last_meal");
const lastMealLinks = document.getElementsByClassName("prev-meal-class");

const url = "https://www.themealdb.com/api/json/v1/1/random.php";

const result = document.getElementById("meal");

const previous = document.getElementById("previous");

let prevMealCount = 0;

idsArr = [];

prevMeals = [];

// prevMealName = [];

// const getLast = recentID => {
//   let recentID = prevMealId;
//   return recentId;
// }

getMealBtn.addEventListener("click", (e) => {
  fetch(url)
    .then((res) => res.json())
    .then((res) => {
      // storeId(res.meals[0]);
    // getLastName = res.meals[0].strMeal;
      displayMeal(res.meals[0]);
      prevMeals.push(res.meals[0].idMeal);
      // prevMealName.push(res.meals[0].idMeal);
    prevMealName = res.meals[0].strMeal;
      console.log(`Viewed Meals: ${prevMeals}`);
      console.log(`Most Recent Meal: ${prevMeals}`);
    console.log(`Most Recent Meal NAME: ${prevMealName}`);
    })
    .catch(function (error) {
      console.log(error);
    });
  e.preventDefault();
});

lastMealBtn.addEventListener("click", (e) => {
  // backOne = idsArr[idsArr.length - 2];
  getLast = prevMeals[prevMeals.length - 2];
  getLast = prevMeals[1];
  fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${getLast}`)
    .then((res) => res.json())
    .then((res) => {
      displayMeal(res.meals[0]);
    console.log(prevMeals);
    })
    .catch(function (error) {
      console.log(error);
    });
  e.preventDefault();
});

// lastMealLinks.addEventListener("click", (e) => {

//   fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${getLast}`)
//     .then((res) => res.json())
//     .then((res) => {
//       displayMeal(res.meals[0]);
//     console.log(prevMeals);
//     })
//     .catch(function (error) {
//       console.log(error);
//     });
//   e.preventDefault();
// });

// const storeId = mealId => {
//   lastId = mealId.idMeal;
//   console.log(lastId);
//   return lastId;
// }



// function confirm_alert(node) {
//     return confirm(`${lastMealLinks}.href`);
// };

// for(var i=0;i<all.length;i++)
//     all[i].onclick=function(){
//         this.innerHTML = 'New Text';
//     }

const displayMeal = (meal) => {
  
  getMealBtn.firstChild.textContent = "Get New Meal ";
  let mealName = meal.strMeal;
  const ingredients = [];
  
  for (let i = 1; i <= 20; i++) {
    if (meal[`strIngredient${i}`]) {
      ingredients.push(
        `${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
      );
    }
  }
  
  result.innerHTML = `
    <div class="meal-overview">
    <div class='info-col'>
      <h2>${meal.strMeal}</h2>
      <span>Cuisine Area: <em>${meal.strArea}</em></span><br>
      <span>Cuisine Category: <em>${meal.strCategory}</em></span>
      <img src="${meal.strMealThumb}" alt="Meal Image">
      <h5>Ingredients:</h5>
				<ul>
					${ingredients
            .map(
              (ingredient) => `<li>
              ${ingredient}
            </li>`
            )
            .join("")}
				</ul>
    </div>
    <div class="details-col">
      <div class="details-copy-container">
      <div class="meal-instructions">
<h3>Meal Instructions</h3>
      <p>${meal.strInstructions}</p>
      </div>
      </div>
    ${
      meal.strYoutube
        ? `
      <div class="meal-vid">
			<h5>Video Recipe</h5>
			<div class="videoWrapper">
				<iframe width="420" height="315"
				src="https://www.youtube.com/embed/${meal.strYoutube.slice(-11)}">
				</iframe>
			</div>`
        : ""
    }
    </div>
    </div>
    </div>
    `;

  previous.innerHTML = `
<h5>Previous Meals:</h5>
				<ul>
					${prevMeals
            .map(
              (prevMeal) => `<li>
              <a class="prev-meal-class" id="prev-meal-link-${prevMealCount++}" href="https://www.themealdb.com/api/json/v1/1/lookup.php?i=${prevMeal}">
              ${prevMeal}</a>
            </li>`
            )
            .join("")}
				</ul>
`;
  
};

// lastMealLinks.addEventListener("click", (e) => {
//   newURL = lastMealLinks.href;
//   fetch(newURL)
//     .then((res) => res.json())
//     .then((res) => {
//       // displayMeal(res.meals[0]);
//     confirm(newURL);
//     })
//     .catch(function (error) {
//       console.log(error);
//     });
//   e.preventDefault();
// });