app.js

console.log('ready to shop 🏪')

// 🏪💾 DATA (State) ----------------------------------------
// arrays are great but strings or not complex enough to store the data of our items
// let shopItems = [
//   'Naruto Shippuden Crocs',
//   'Goku Super Sayian 2 Hair (Wig)',
//   'Tokyo Ghoul Mask (Cosplay)',
//   'L Figurine'
// ]

let shopItems = [
  {
    name: 'Kakashi Classic Clogs',
    price: 75,
    quantity: 0
  },
  {
    name: 'Goku Wig',
    price: 15,
    quantity: 0
  },
  {
    name: 'Ghoul Mask',
    price: 21.99,
    quantity: 0
  },
  {
    name: 'L Figure',
    price: 65.99,
    quantity: 0
  },

]

// 🧠⚡ BUSINESS LOGIC (functions that modify the state)------


// NOTE start here (great place to get something working)
function buyKakashiClogs() {
  // console.log('🥷🛒👞', shopItems[0]['quantity'])
  // console.log(`🥷🛒👞`, shopItems[0].quantity)
  // Create an alias (more readable name)
  let kakashiClogs = shopItems[0] // kakashiClogs is easier to read than shopItems[0]
  kakashiClogs.quantity += 1
  console.log('🛍️', kakashiClogs);
  // once done modifying data, draw
  drawItemsToCart()
}

function buyGokuWig() {
  console.log('🧝‍♂️🛒⚡')
  let gokuWig = shopItems[1]
  gokuWig.quantity += 1
  console.log('🛍️', gokuWig)
  // once done modifying data, draw
  drawItemsToCart()
}

// NOTE move onto a Parameter (functions Parameters are VERY important)
function buyItemUsingPosition(itemPosition) {
  console.log('🛒🏪', itemPosition)
  let itemToAdd = shopItems[itemPosition]
  itemToAdd.quantity += 1
  console.log('🛍️', itemToAdd);
  // once done modifying data, draw
  drawItemsToCart()
}

// NOTE lastly, try to build something like this.
// it's the most complex but it is the most functional too
// it will be a challenge but your future self will thank you
function buyItemUsingName(itemName) {
  console.log('🛒📝', itemName)
  // let itemToAdd = null // when this function starts, i don't know where the data is
  // i is often used in loops for (current index: i)
  for (let i = 0; i < shopItems.length; i += 1) {
    // as the loop advances through the array
    // current item is *1* item from it
    let currentItem = shopItems[i]
    console.log('👀', i, currentItem)

    if (currentItem.name == itemName) {
      currentItem.quantity += 1
      console.log('🚩 found it', currentItem);
    }
  }
  // once done modifying data, draw
  drawItemsToCart()
}




// 🎨🖌️ VISUALIZERS (functions that draw data from the state to the page)

let cartItemsElement = document.getElementById('cart-items')
let cartTotalElement = document.getElementById('cart-total')

function drawItemsToCart() {
  cartItemsElement.innerHTML = ''
  for (let i = 0; i < shopItems.length; i += 1) {
    let currentItem = shopItems[i]
    console.log('🖌️', currentItem);
    if (currentItem.quantity >= 1) {
      cartItemsElement.innerHTML += `
      <div class="d-flex justify-content-between"> 
      <b>${currentItem.name}</b> 
      <div>
      <span>${currentItem.quantity} x </span>
      <span>$${currentItem.price * currentItem.quantity}</span>
      </div>
      </div>
      `
    }
  }
  drawCartTotal()
}

function drawCartTotal() {

  let totalSum = 0

  for (let i = 0; i < shopItems.length; i += 1) {
    let currentItem = shopItems[i]
    totalSum += currentItem.price * currentItem.quantity
    console.log('💵', currentItem.price * currentItem.quantity, totalSum)
  }

  cartTotalElement.innerHTML = `<h4>TOTAL: $${totalSum}</h4>`

}