/**
 * Represents a product.
 * @constructor
 */
class Product {
 	constructor(options) {
		// ANSWER TO 5a:
		const { id, emoji, description, price, inStock } = options;
		this.id = id;
		this.emoji = emoji;
		this.description = description;
		this.price = price;
		this.inStock = inStock;
		
		/* ANSWER TO 5b:
		 * constructor({ id, emoji, description, price, inStock }) {
		 *     this.id = id;
		 *     this.emoji = emoji;
		 *     this.description = description;
		 *     this.price = price;
		 *     this.inStock = inStock;
		 * }
		*/
	}

	// ANSWER TO 6a:
	getHTML(inCart = false) {
	
		if (this.inStock) {
			// ANSWER TO 7a AND 7b:
 			const { id, emoji, description, price, inStock } = this;
			
			// ANSWER TO 8a AND 8b:
			const html = 
				`<li>
					<h3>${description}</h3>

					${!inCart ? `<p class="emoji">${emoji}</p>` : ''}

					${this.quantity > 1
						? `<p>${this.quantity} x
							<span class="price">
								${this.cartPrice}
							</span>
						   </p>`
						: ''}

					<p>
						<span class="price">${price}</span>
					</p>

					${inCart
						? `<a href="#" onClick="cart.removeProduct(${id});">
							  Remove
						   </a>`
						: `<a href="#" data-id="${id}">
							  Add to Cart
						   </a>` 
					}
			    </li>`;
			return html;
		}
		return '';
	}
}

/**
 * Represents a shopping cart.
 * @constructor
 */
class ShoppingCart {
	// ANSWER TO 9a:
	constructor(items = []) {
    	this.items = items;
  	}
  
	addProduct(item) {  
		// ANSWER TO 10a, 10b, AND 10c:
		const matchingItem = this.items.find(currentElement => item.id === currentElement.id);

		if (typeof matchingItem !== 'undefined') {
			const { price } = matchingItem;
			matchingItem.quantity++;
			matchingItem.cartPrice = matchingItem.quantity * price;
			this.updateCart();
		} else {
			const cartItem = new ProductInCart(item);
			this.items.push(cartItem);
			this.updateCart();
		}
	}
  
	removeProduct(id) {
		const matchingItem = this.items.find(item => id === item.id);
		
		if (typeof matchingItem !== 'undefined') {
			const matchingItemIndex = this.items.indexOf(matchingItem);
			this.items.splice(matchingItemIndex, 1);
			this.updateCart();
		}
	}
  
	updateCart() {
		// called whenever an item is added or removed
		const cart = document.getElementById('cart');
		cart.innerHTML = '';
		
		// ANSWER TO 11a AND 11b:
		this.items.forEach(item => cart.innerHTML += item.getHTML(true));
		this.updateTotal();
	}

	updateTotal() {
		// ANSWER TO 12a AND 12b:
		const total = this.items.reduce((currentSum, item) => currentSum + item.cartPrice, 0);
		document.getElementById('cart-total').innerText = total;
	}
}

/**
 * Represents a product in a shopping cart.
 * @constructor
 * @extends Product
 * @param {integer} cartPrice - The total price of this product in the cart.
 * @param {integer} quantity - The quantity of this product in the cart.
 */
class ProductInCart extends Product {
	constructor(options) {
		super(options);
		this.cartPrice = options.price;
		this.quantity = 1;
	}
}

/**
  * Initializes our application.
  */
const url = 'https://raw.githubusercontent.com/anythingcodes/emoji-shop/master/data/emoji.json';
const cart = new ShoppingCart();
// ANSWER TO 13a:
fetch(url)
	.then(serverResponse => serverResponse.json())
	.then(response => {
		const productContainer = document.getElementById('products');
	
		// ANSWER TO 14a:
		const products = response.map(responseItem => {
			const newProduct = new Product(responseItem);
			productContainer.innerHTML += newProduct.getHTML();
			return newProduct;
		});
	
		const links = productContainer.querySelectorAll('a');
	
		// ANSWER TO 15a AND 15c:
		links.forEach(link => {
			// ANSWER TO 13b:
			link.addEventListener('click', evt => {
				evt.preventDefault();
				const id = parseInt(evt.target.getAttribute('data-id'), 10);
				
				// ANSWER TO 15b AND 15bi:
				const matchingProduct = products.find(product => product.id === id);
				
				cart.addProduct(matchingProduct);
			});
		})
	})
	.catch(err => console.log(err));