console.log("welcome")

if(document.readyState == 'loading')
{
    document.addEventListener("DOMContentLoaded", ready)
}
else
{
    ready()
}

function ready()
{
    var removeCartButton = document.getElementsByClassName('btn-remove')

    for(var i = 0; i < removeCartButton.length; i++)
    {
        removeCartButton[i].addEventListener('click', removeCartItem)
    }

    var quantInput = document.getElementsByClassName('cart-quant-input')

    for(var i = 0; i < quantInput.length; i++)
    {
        quantInput[i].addEventListener('change', updateQuant)
    }

    var addCartButton = document.getElementsByClassName('shop-item-add-btn')

    for(var i = 0; i < addCartButton.length; i++)
    {
        addCartButton[i].addEventListener('click', addItemButton)
    }

    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function addItemButton(event)
{
    console.log('adding item')
    var item = event.target.parentElement.parentElement
    var title = item.getElementsByClassName('shop-item-title')[0].innerText
    var price = item.getElementsByClassName('shop-item-price')[0].innerText
    var img = item.getElementsByClassName('shop-item-image')[0].src

    addItemToCart(title,price,img);
}

function addItemToCart(title, price, img)
{
    console.log('Adding item to cart')

    var cartItemNames = document.getElementsByClassName('cart-item-title')

    var inCart = false;
    var cartRowToUpdate = 0

    for(var i = 0; i < cartItemNames.length; i++)
    {
        if(cartItemNames[i].innerText == title)
        {
            inCart = true
            cartRowToUpdate = cartItemNames[i].parentElement.parentElement
            break;
        }
    }

    if(inCart)
    {        
        var quantEle = cartRowToUpdate.getElementsByClassName('cart-quant-input')[0]
        quantEle.value++
    }
    else
    {
        var cartRow = document.createElement('div')
        var cartItems = document.getElementsByClassName('cart-items')[0]

        cartRow.classList.add('cart-row')

        cartRow.innerHTML = `<div class="cart-row-item cart-column">
                                <img class="cart-item-image" src="` + img +`">
                                <span class="cart-item-title">` + title + `</span>
                            </div>
                            <span class="cart-row-price cart-column">` + price + `</span>
                            <div class="cart-row-quantity cart-column">
                                <input class="cart-quant-input" type="number" value ="1">
                                <button class="btn btn-remove" type="button">Remove</button>
                            </div>`

        cartItems.appendChild(cartRow)

        cartRow.getElementsByClassName('btn-remove')[0].addEventListener('click', removeCartItem)
        cartRow.getElementsByClassName('cart-quant-input')[0].addEventListener('change', updateQuant)
    }
    
    updateCartTotal();
}

function removeCartItem(event)
{
    console.log("remove clicked")
    event.target.parentElement.parentElement.remove()
    updateCartTotal()
}

function updateCartTotal()
{
    console.log("Updating cart")

    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItems.getElementsByClassName('cart-row')
    var newTotal = 0.0
    
    for(var i = 0; i < cartRows.length; i++)
    {
        var curCartRow = cartRows[i]
        var priceEle = curCartRow.getElementsByClassName('cart-row-price')[0]
        var quantEle = curCartRow.getElementsByClassName('cart-quant-input')[0]

        var price = parseFloat(priceEle.innerText.replace('$', ''))
        
        newTotal += price*(quantEle.value)
    }

    newTotal = Math.round(newTotal * 100) / 100

    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + newTotal
}

function updateQuant(event)
{
    var quantEle = event.target

    console.log("Updating quantity")

    if(isNaN(quantEle.value) || quantEle.value <= 0)
    {
        quantEle.value = 1
    }
    else
    {

    }

    updateCartTotal()
}

function purchaseClicked(event)
{
    console.log("Purchasing items")
    document.getElementsByClassName('cart-items')[0].innerHTML = ''

    alert('You have just been scammed')

    updateCartTotal()
}