const products = [
  {
    productName: "Boconó Specialty Coffee Beans Colombie 1 kg",
    productPrice: "44.90",
    productImg: "bocono1_1kg.png"
  },

  {
    productName: "Boconó Specialty Coffee Beans Brazil 1 Kg",
    productPrice: "42.90",
    productImg: "coffee_brazil_1kg.png"
  },

  {
    productName: "Boconó Specialty Coffee Beans Ethiopia 1 Kg",
    productPrice: "46.90",
    productImg: "coffee_ethopia_1kg.png"
  }
];

// Toggle shopping cart
const shoppingCart = document.getElementById("shoppingCart");
const closeCart = document.getElementById("closeCart");

const itemContainer = document.getElementById("itemContainer");
const cartContainer = document.getElementById("cartContainer");
const eachCartItemContainer = document.getElementById("eachCartItemContainer");
const totalItem = document.getElementById("totalItem");

const cartTitle = document.getElementById("cartTitle");
const totalPrice = document.getElementById("totalPrice");
const totalPriceContainer = document.getElementById("totalPriceContainer");

const storedItems = localStorage.getItem("cartItems");
const cartItems = storedItems !== null ? storedItems.split(",") : [];

totalItem.innerText = cartItems.length !== null ? cartItems.length - 1 : 0;

// Iterate card
for (let index = 0; index < products.length; index++) {
  const { id, productName, productPrice, productImg } = products[index];
  itemContainer.innerHTML +=
    ` <div class="card">` +
    ` <article class="cardImg">` +
    ` <img src="https://picsum.photos/id/237/200/300" alt="">` +
    `</article> ` +
    ` <div class="itemDescContainer">` +
    `<article class="itemDesc">` +
    `<h1 class="itemName">${productName}</h1>` +
    `<p class="itemPrice">${productPrice}€</p>` +
    `<button class="closeModal">Close</button>` +
    ` </article> ` +
    `<div class="addtocart" id="addtocart${id}")'>` +
    `<i class="fa-solid fa-cart-shopping cart"></i>` +
    ` </div>` +
    ` </div>` +
    `</div>`;
}

const overlay = document.querySelectorAll(".itemDesc");
const photos = document.querySelectorAll(".cardImg");
const closeModal = document.querySelectorAll(".closeModal");
photos.forEach((e) => e.addEventListener("click", clicked));
closeModal.forEach((e) => e.addEventListener("click", closeModals));

function clicked(e) {
  e.target.closest(".card").classList.add("modal-open");
}
function closeModals(e) {
  e.target.closest(".card").classList.remove("modal-open");
}

// Add click event listener for card Item
for (let index = 1; index <= products.length; index++) {
  document.getElementById(`addtocart${index}`).onclick = () => {
    if (cartItems.includes(index) === false) {
      totalItem.innerText = cartItems.length;
      cartItems.unshift(index);
      localStorage.setItem("cartItems", cartItems);
    }
  };
}

shoppingCart.onclick = () => {
  cartContainer.classList.add("showCartContainer");
  displayItemInCart();
};

closeCart.onclick = () => {
  cartContainer.classList.remove("showCartContainer");
};

// AddClickEvent for button
const displayItemInCart = () => {
  cartTitle.innerText = `${cartItems.length - 1} Item In cart`;
  eachCartItemContainer.innerHTML = "";
  if (localStorage.getItem("cartItems")) {
    const cartArray = localStorage.getItem("cartItems").split(",");
    totalPrice.innerText = "";
    totalPriceContainer.style.display = "block";
    products.map((item) => {
      const { id, productName, productPrice, productImg } = item;
      if (cartArray.includes(id)) {
        totalPrice.innerHTML = (
          Number(totalPrice.innerText) + Number(productPrice)
        ).toFixed(2);

        return (eachCartItemContainer.innerHTML +=
          `<div class="eachCart">` +
          ` <img src="./img/${productImg}" class="cartImg" alt="">` +
          `<div class="cartDesc">` +
          `<h1 class="cartItemName">${productName}</h1>` +
          `<p class="cartItemPrice">${productPrice}€</p>` +
          `<i class="fa-solid fa-trash fa-lg" id="remove${id}"></i>` +
          `<i class="fa-solid fa-plus fa-lg" id="addtocart${id}")></i>` +
          `<i class="fa-solid fa-minus fa-lg" id="addtocart${id}")></i>` +
          `</div>` +
          `</div>`);
      }
    });
  } else {
    cartTitle.innerText = "No Item";
    totalPriceContainer.style.display = "none";
  }
  onRemoveButton();
};

const onRemoveButton = () => {
  const itemInCart = localStorage.getItem("cartItems");
  const itemInCartArray = itemInCart.split(",");

  for (let index = 0; index < itemInCartArray.length; index++) {
    const removedItem = itemInCartArray[index];
    document.getElementById(`remove${removedItem}`).onclick = () => {
      const Itemindex = itemInCartArray.indexOf(removedItem);
      cartItems.splice(Itemindex, 1);
      localStorage.setItem("cartItems", cartItems);
      totalItem.innerText = cartItems.length - 1;
      displayItemInCart();
    };
  }
};