/* *** Init *** */

*{
  box-sizing: border-box;
  font-family: sans-serif
}

body {
  background-color: #173F5F
}

#shop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #F6D55C;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 5px #333;
}

/* *** Header *** */

#shop > header {
  width: 100%;
  height: 3rem;
  display: flex;
  padding: 0 1rem;
  justify-content: space-between;
}

#shop header div {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#shop svg {
  width: 1.5rem;
  height: 100%;
}

#shop svg > path {
/*   stroke-dasharray: 3237; */
  stroke-dashoffset: 3237;
  fill: none;
  stroke: black;
  stroke-width: 15px;
}

#shop svg:hover > path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash .5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* *** Products *** */

.products {
  width: 100%;
  height: 100%;
  padding: .5rem 1rem 0 1rem;
}

.products > article {
  user-select: none;
  position: relative;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 0 .5rem;
  margin-bottom: .5rem;
  border-radius: 10px;
  align-items: center;
  cursor: pointer;
}

.products img {
  width: 3rem;
  height: 3rem;
}

.productClone {
  position: absolute;
  left: 5px;
  top: 5px;
  transition: transform 1s, opacity .3s ease-out 0.6s;
  pointer-event: none;
}

@media(prefers-reduced-motion) {
  .productClone {
    transition: none;
  }
}

const products = document.querySelectorAll(".products > article");
const productImgs = document.querySelectorAll(".products > article > img");
const cart = document.querySelector("#cart")
const cartCounter = document.querySelector("#cartCounter")

let cartPos = cart.getBoundingClientRect()
let cartItems = 0

window.addEventListener("resize", () => {
  cartPos = cart.getBoundingClientRect()
})


products.forEach((product, i) => {
    product.addEventListener("click", () => {
      // initiate timer "[TIMERNAME]"
      console.time(`responseTime`)
      
      cartItems++
      cartCounter.innerHTML = cartItems
      
      // get and set img
      const productImg = productImgs[i].cloneNode()
      productImg.classList.add("productClone")
      product.appendChild(productImg)
      
      // create animation
      productImg.style.transform = calculateDifference(productImg)
      productImg.style.opacity = 0
      
      requestAnimationFrame(() => {
        // stop timer "[TIMERNAME]"
        console.timeEnd("responseTime")
      })
      
      // remove el
      // kan beter met requestTimeFrame()
      setTimeout(() => {
        productImg.remove()
      }, 1100)
    })
})

const calculateDifference = (img) => {
  
  // For an even better performance, you can create an Array filled with all img-getboundingClientRect() info
  const imgPos = img.getBoundingClientRect()
  
  const deltaX = cartPos.left - imgPos.left
  const deltaY = cartPos.top - imgPos.top
  
  return `translate3d(${deltaX}px, ${deltaY}px, 0)`
}