/* 
- great job on existing item feature and hover effects on buttons
- and close modal feature

- eliminate empty lines of code
- remove button doesn't remove the correct item
- if you remove all items, the Your order text and the complete order button should disappear
- disable buttons so you can't add additional items or complete order

Stretch goals:
- credit card number shouldn't be validated if there are less than a certain number of digits
- https://www.w3schools.com/tags/att_input_type_number.asp
*/

import {itemsArray} from '/data.js'

let ordersArray = []
const paymentInfoForm = document.getElementById("payment-info-form")



document.addEventListener('click', function(e){
    if(e.target.dataset.btn){
        getOrdersArray(e.target.dataset.btn)
        // console.log(ordersArray)
    } else if(e.target.dataset.remove){
        // console.log("click remove item")
        // we need to find the index of the item that we want to remove
        removeFromOrder(e.target.dataset.remove)
        // console.log(ordersArray)
        //hide "Your order and complete order button"
    } else if(e.target.id === 'complete-order-btn'){
        // console.log("click complete order")
        handleCompleteOrderBtn()
        // disable add / remove buttons here
    } else if(e.target.id === 'form-close-btn'){
        // console.log("click close modal")
        handleFormCloseBtn()
    } 
})
 
renderMenu()   


 
 function renderMenu(){
    let itemsHtml = ''
    
    itemsArray.forEach(function(item){
        //desconstruct - extract data an from arrays, objects, and maps and set them into new, distinct variables.
        itemsHtml += `
                <div class="object-container">
                    <span class="emoji">${item.emoji}</span>
                    <div class="menu-items">
                        <h2>${item.name}</h2>
                        <p>${item.ingredients}</p>
                        <h2>£${item.price}</h2>
                    </div>
                     <button class="add-btn" data-btn=${item.id}>+</button>
                </div>
                `  
    })
     document.getElementById('menu').innerHTML = itemsHtml
}
 
    
     
function getOrdersArray(itemId){
    //console.log(itemId)
    //console.log(ordersArray.length)
    if (ordersArray.length === 0){
        const newOrder = getNewOrder(itemId)
        ordersArray.push(newOrder)
    } else {
        addToOrdersArray(itemId)
    }
    //console.log(ordersArray)
    renderOrders(ordersArray)
} 



function addToOrdersArray(itemId){
    const existingItem = ordersArray.filter(function(order){
        // console.log(itemId)
        return order.id === itemId
    })[0]
    
    const originalItem = itemsArray.filter(function(item){
        return item.id === itemId
    })[0]
    
    if(ordersArray.includes(existingItem)){
        existingItem.price += originalItem.price
        existingItem.amount++
        
    } else {
        const newOrder = getNewOrder(itemId)
        ordersArray.push(newOrder)
        renderOrders()
    }
    
}   
 
     
        
function getNewOrder(itemId){
    const targetItem = itemsArray.filter(function(item){
        return item.id === itemId
    })[0]
    let newOrder = {
                    name: targetItem.name,
                    price: targetItem.price,
                    amount: targetItem.amount,
                    id: targetItem.id           
    }
    return newOrder
}



function removeFromOrder(orderId){
    const targetObject = ordersArray.filter(function(order){
        //console.log(order.id)
        return order.id === orderId
    })[0]
    //pop?
    ordersArray.pop(targetObject)
    
    renderOrders()
}



function renderOrders(){
    let ordersHtml = ''
    let totalPrice = 0

    for (let order of ordersArray){
        //desconstruct - extract data an from arrays, objects, and maps and set them into new, distinct variables.
    // add quotes around use of ${} for ${order.id} below?
        ordersHtml += `
        <div class="orders-container">
            <h2>${order.name}</h2>
            <h3 class="order-amount">x${order.amount}</h3>
            <button class="remove-btn" data-remove=${order.id}>REMOVE</button>
            <h2 class="order-price">£${order.price}</h2>
        </div> `
        
        totalPrice += order.price 
    }
    
   
    document.getElementById("total-price").innerHTML = `£${totalPrice}`
    document.getElementById("orders").innerHTML = ordersHtml
    document.getElementById("your-order-section").classList.remove("hidden")
    
}



function handleCompleteOrderBtn(){
    if(ordersArray.length > 0){
        document.getElementById("order-form").classList.remove('hidden')
    }
}



function handleFormCloseBtn(){
    document.getElementById("order-form").classList.add('hidden')
    //enable buttons when modal is closed
}



paymentInfoForm.addEventListener('submit',function(e){
    
    e.preventDefault()
    
    const paymentFormData = new FormData(paymentInfoForm)
    const name = paymentFormData.get('user-name')
    
    let thankYouMessage = ""
    thankYouMessage += `
    
        <h1>Thank you, <span class="user-name">${name}</span>!<h1>
        <h1>Your order is on it's way!<h1>
    `
    
    document.getElementById('thank-you-message').innerHTML = thankYouMessage
    
    document.getElementById('thank-you-message').classList.remove('hidden')
    document.getElementById('order-form').classList.add('hidden')
    document.getElementById('your-order-section').classList.add('hidden')
    
})