<div id="content"></div>
<div id="cart"></div>

h1, h2, h3, p, a, b, span {
  font-size: 1rem;
  margin: 0;
  padding: 0;
}
body {
  background: #eee;
}
#content {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 30%;
  margin-right: 1rem;
  padding: 1rem;
  border: solid 1px #ccc;
}
#cart {
  margin-top: 1rem;
  background: #ddd;
  width: 100%;
  height: 100%; 
}

// data
const jsonFile = [
  { id: '001', name: 'Hoody Green', price: 65.0 },
  { id: '002', name: 'Cap Pink', price: 35.0 },
  { id: '003', name: 'Cap Black', price: 25.0 },
];

const products = jsonFile.reduce((acc, c) => {
  acc[c.id] = c;
  return acc;
}, {}); // { id: {id, name, price}, }
const cart = {}; // { id: quantity }

const renderProductItem = data => {
  const { id, name, price } = data;
  return `
    <div class="item">
      <p>ID - ${id}</p>
      <h2>${name}</h2>
      <b>${price}</b>
      <div class="goods__btn">
        <button class="minus" onclick="minus('${id}')">&minus;</button>
        <button class="plus" onclick="plus('${id}')">&plus;</button>
      </div>
    </div>
  `;
};

const renderCartItem = data => {
  const { id, name, price, quantity } = data;
  return `
    <div class="cart-item">
      ID ${id} (${name}): ${quantity} pcs.
      <button class="minus" onclick="minus('${id}')">&minus;</button>
      <button class="plus" onclick="plus('${id}')">&plus;</button>
      =$${price * quantity}
    </div>
  `;
};

const productsContainer = document.getElementById('content');
const cartContainer = document.getElementById('cart');

const getCartTotal = () =>
  Object.entries(cart)
    .map(([id, quantity]) => products[id].price * quantity)
    .reduce((sum, current) => sum + current);

const renderCart = () => {
  if (Object.keys(cart).length === 0) {
    cartContainer.innerHTML = 'Cart is empty';
    return;
  }

  cartContainer.innerHTML =
    Object.entries(cart)
      .map(([id, quantity]) => renderCartItem({ ...products[id], quantity }))
      .join('') + `<div class="cart-total">Total: $${getCartTotal()}</div>`;
};

const showProducts = products => {
  productsContainer.innerHTML = Object.values(products)
    .map(renderProductItem)
    .join('');
};

showProducts(products);
renderCart();

const plus = id => {
  cart[id] ??= 0;
  cart[id]++;
  renderCart();
};

const minus = id => {
  if (cart[id]) {
    cart[id]--;
    if (cart[id] <= 0) delete cart[id];
    renderCart();
  }
};