let carts = document.querySelectorAll('.btn');

let products = [ 
    {   
        name: "Camouflage Crossbody Bag",
        tag: "btn 1", 
        tag:"PhotoRoom_013_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Storm Trooper Crossbody Bag",
        tag: "btn 2",
        tag:"PhotoRoom_016_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Gamer Crossbody Bag",
        tag: "btn 3",
        tag:"PhotoRoom_015_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Care Bear Scrunchie Set 2pcs",
        tag: "btn 4",
        tag:"PhotoRoom_011_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Gamer Scrunchie Set 2pcs",
        tag: "btn 5",
        tag:"PhotoRoom_005_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Mustache Scrunchie Set 2pcs",
        tag: "btn 6",
        tag:"PhotoRoom_006_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Black & White Scrunchie Set 2pcs",
        tag: "btn 7",
        tag:"PhotoRoom_009_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Pastel Rainbow Scrunchie Set 2pcs",
        tag: "btn 8",
        tag:"PhotoRoom_001_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Floral Scrunchie Set 2pcs",
        tag: "btn 9",
        tag:"PhotoRoom_20220219_091914",
        price: 10.00,
        inCart: 0
    },
];

for (let i=0; i < carts.length; i++) {
    carts[i].addEventListener('click', () => {
        cartNumbers(products[i]);
        totalCost(products[i])
    })
}

function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');

    if(productNumbers) {
        document.querySelector('.cart span').textContent = productNumbers;
    }
}

function cartNumbers(product, action) {
    let productNumbers = localStorage.getItem('cartNumbers');
    productNumbers = parseInt(productNumbers);

    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if( action == "decrease") {
        localStorage.setItem('cartNumbers', productNumbers - 1);
        document.querySelector('.cart span').textContent = productNumbers - 1;
    } else if( productNumbers ) {
        localStorage.setItem("cartNumbers", productNumbers + 1 );
        document.querySelector('.cart span').textContent = productNumbers + 1;
    } else {
        localStorage.setItem('cartNumbers', 1);
        document.querySelector('.cart span').textContent = 1;
    }

    setItems(product);
}

function setItems(product) {
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if(cartItems != null) {
        if(cartItems[product.tag] == undefined) {
            cartItems = {
                ...cartItems,
                [product.tag]: product
            }
        }
        cartItems[product.tag].inCart += 1; 
    } else {
        product.inCart = 1;
        cartItems = {
            [product.tag]: product
        }
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

function totalCost(product, action) {
    let cartCost = localStorage.getItem('totalCost');
    
    console.log("My cartCost is", cartCost);
    console.log(typeof cartCost );
    if( action == "decrease") {
        cartCost = parseInt(cartCost);

        localStorage.setItem('totalCost',cartCost - product.price);
    } else if(cartCost != null) {
        cartCost = parseInt(cartCost);
        localStorage.setItem("totalCost", cartCost + product.price);
    } else {
        localStorage.setItem("totalCost", product.price);
    }
}

function displayCart() {
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');

    //console.log(cartItems);
    if( cartItems && productContainer ) {
        productContainer.innerHTML = '';
        Object.values(cartItems).map( (item => {
            productContainer.innerHTML += 
            `<div class="product">
            <div>
            <center>
            <ion-icon name="close-circle"></ion-icon>
            </center>
            </div>
            <div>
            <center>
            <img src="./images/${item.tag}.png" /> 
            </center> 
            </div>
            <span>${item.name}</span>
            </div>
            <div class="price sm-hide">$${item.price}.00</div>
            <div class="quantity">
                <ion-icon class="decrease "
                <ion-icon name="remove-outline"></ion-icon>
                <span>${item.inCart}</span>
                <ion-icon class="increase"
                <ion-icon name="add-outline"></ion-icon> 
            </div>
            <div class="total">$${item.inCart * item.price}.00</div>
            `;
        }));   
        
        
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">Cart Total</h4>
                <h4 class="basketTotal">$${cartCost}.00</h4>
            </div>
            `;
        
    }
    
    deleteButtons();
    manageQuantity();
}

function deleteButtons() {
    let deleteButtons = document.querySelectorAll('.product ion-icon');
    let productName;
    let productNumbers = localStorage.getItem('cartNumbers');
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    let cartCost = localStorage.getItem('totalCost');
    


    for(let i=0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', () => {
            productName = deleteButtons[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');
            // console.log(productName);
            //console.log(cartItems[productName].name + " " + cartItems[productName].inCart)
            localStorage.setItem('cartNumbers', productNumbers - cartItems[productName].inCart);

            localStorage.setItem('totalCost', cartCost - ( cartItems[productName].price * cartItems[productName].inCart));

            delete cartItems[productName];
            localStorage.setItem('productsInCart', JSON.stringify(cartItems));

            displayCart();
            onLoadCartNumbers();
        });
    }
}

function manageQuantity() {
    let decreaseButtons = document.querySelectorAll('.decrease');
    let increaseButtons = document.querySelectorAll('.increase');
    let cartItems = localStorage.getItem('productsInCart');
    let currentQuantity = 0;
    let currentProduct = "";
    cartItems = JSON.parse(cartItems);
    console.log(cartItems);

    for(let i=0; i < decreaseButtons.length; i++) {
        decreaseButtons[i].addEventListener('click', () => {
            currentQuantity = decreaseButtons[i].parentElement.querySelector('span').textContent;
            console.log(currentQuantity);
            currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLowerCase().replace(/ /g, '').trim();
            console.log(currentProduct);

            if( cartItems[currentProduct].inCart > 1 ) {
                cartItems[currentProduct].inCart -= 1;
                cartNumbers( cartItems[currentProduct], "decrease" );
                totalCost( cartItems[currentProduct], "decrease" );
                localStorage.setItem('productsInCart', JSON.stringify(cartItems));
                displayCart();
            }
        });
    }

    for(let i=0; i < increaseButtons.length; i++) {
        increaseButtons[i].addEventListener('click', () => {
            console.log("Increase button");
            currentQuantity = increaseButtons[i].parentElement.querySelector('span').textContent;
            console.log(currentQuantity);

            currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLowerCase().replace(/ /g, '').trim();
            console.log(currentProduct);

            
                cartItems[currentProduct].inCart += 1;
                cartNumbers( cartItems[currentProduct]);
                totalCost( cartItems[currentProduct]);
                localStorage.setItem('productsInCart', JSON.stringify(cartItems));
                displayCart();
            
        })      
    }
}

onLoadCartNumbers();
displayCart();