localStorage.clear();  // tek sayfa kullanılıyorsa temizler

//! variables
const cartBtn = document.querySelector(".cart-btn");
const clearCartBtn = document.querySelector(".btn-clear");
const checkoutCartBtn = document.querySelector(".btn-checkout");
const cartItems = document.querySelector(".cart-items");
const cartTotal = document.querySelector(".total-value");
const cartContent = document.querySelector(".cart-list");
const productsDOM = document.querySelector("#products-dom");

var kurlar = "TL"; //databaseden
let cart = [];
let buttonsDOM = [];

class Products {
    async getProducts() {
        try {
//            let result = await fetch("https://67a784d6203008941f67d30d.mockapi.io/products");
//            let data = await result.json();

let data = [{"id":"1","title":"Tokat Yaprağı - 1 kg","image":"Tokat Yaprağı - 1 kg","price":350},{"id":"2","title":"Tokat Yaprağı - 3,5 kg","image":"Tokat Yaprağı - 3,5 kg","price":650},{"id":"3","title":"Tokat Yaprağı - 5 kg","image":"Tokat Yaprağı - 5 kg","price":1250},{"id":"4","title":"Kuşburnu Pekmezi - 1 kg","image":"Kuşburnu Pekmezi - 1 kg","price":250},{"id":"5","title":"Üzüm Pekmezi - 1 kg","image":"Üzüm Pekmezi - 1 kg","price":250},{"id":"6","title":"Karadut Pekmezi - 1 kg","image":"Karadut Pekmezi - 1 kg","price":250},{"id":"7","title":"Karakovan Bal - 1 kg","image":"Karakovan Bal - 1 kg","price":950},{"id":"8","title":"Süzme Bal - 1 kg","image":"Süzme Bal - 1 kg","price":450},{"id":"9","title":"Sarı Kantaron Yağı - 200 gr","image":"Sarı Kantaron Yağı - 200 gr","price":250},{"id":"10","title":"Kozalak Şurubu - 1 lt","image":"Kozalak Şurubu - 1 lt","price":500},{"id":"11","title":"Kuyruk Yağlı Krem","image":"Kuyruk Yağlı Krem","price":450},{"id":"12","title":"İpek Krem","image":"İpek Krem","price":350},{"id":"13","title":"Botoks Krem","image":"Botoks Krem","price":350},{"id":"14","title":"Yara\/Yanık Kremi","image":"Yara\/Yanık Kremi","price":350},{"id":"15","title":"El\/Ayak Bakım Kremi","image":"El\/Ayak Bakım Kremi","price":350},{"id":"16","title":"Katı Parfüm","image":"Katı Parfüm","price":300},{"id":"17","title":"Lip Gloss","image":"Lip Gloss","price":300},{"id":"18","title":"Şampuan - 500 ml","image":"Şampuan - 500 ml","price":450},{"id":"19","title":"Yüz Temizleme Losyonu","image":"Yüz Temizleme Losyonu","price":400},{"id":"20","title":"Limon\/Sarımsak Kürü - 1 lt","image":"Limon\/Sarımsak Kürü - 1 lt","price":500}]; //databaseden 
            let products = data;
            return products;
        } catch (error) {
            console.log(error);
        }
    }
}

class UI {
	
    displayProducts(products) {
        let result = "";
        products.forEach(item => {
//  		item.price = parseFloat(item.price.toFixed(2));
			item.price = item.price.toFixed(2);
            result += `
            
			<div class="col-lg-12 col-md-12">
                <div class="product">
                    <div class="product-image">
					<table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th width="5%">${item.id}</th>
                                        <th width="70%">${item.title}</th>
										<th width="25%">${item.price} ${kurlar}</th>
                                    </tr>							
                                    </thead>
                                </table>
                    </div>
                    <div class="product-hover">
                        <span class="product-title">${item.title}</span>
                        <span class="product-price">${item.price} ${kurlar}</span>
                        <button class="btn-add-to-cart" data-toggle="canvas" data-target="#bs-canvas-right" aria-expanded="false" aria-controls="bs-canvas-right" onclick="removeElement()" data-id=${item.id}>
                            <i class="fas fa-cart-shopping"></i>
                        </button>
                    </div>
                </div>
            </div>
            `});
        productsDOM.innerHTML = result;
    }

    getBagButtons() {
        const buttons = [...document.querySelectorAll(".btn-add-to-cart")];
        buttonsDOM = buttons;
        buttons.forEach(button => {
            let id = button.dataset.id;
            let inCart = cart.find(item => item.id === id);
            if (inCart) {
                button.setAttribute("disabled", "disabled");
                button.style.opacity = ".3";
            } else {
                button.addEventListener("click", event => {
                    event.target.disabled = true;
                    event.target.style.opacity = ".3";
                    //* get product from products
                    let cartItem = { ...Storage.getProduct(id), amount: 1 };
                    //* add procuct to the cart
                    cart = [...cart, cartItem];
                    //* save cart in local storage
                    Storage.saveCart(cart);
                    //* save cart values
                    this.saveCartValues(cart);
                    //* display cart item
                    this.addCartItem(cartItem)
                    //* show the cart
                    this.showCart();
                })
            }
        })
    }

    saveCartValues(cart) {
        let tempTotal = 0;
        let itemsTotal = 0;
        cart.map(item => {
            tempTotal += item.price * item.amount;
            itemsTotal += item.amount;
        });

        cartTotal.innerText = tempTotal.toFixed(2) + " " + kurlar;
        cartItems.innerText = itemsTotal;
    }

    addCartItem(item) {
        const li = document.createElement("li");
        li.classList.add("cart-list-item");
		li.innerHTML = `
            <div class="cart-left">
                <div class="cart-left-image">
                    
                </div>
                <div class="cart-left-info">
                    <a class="cart-left-info-title" href="#">${item.title}</a>
                    <span class="cart-left-info-price">${item.price} ${kurlar}</span>
                </div>
            </div>
            <div class="cart-right">
                <div class="cart-right-quantity">
                    <button class="quantity-minus" onclick="removeElement()" data-id=${item.id}>
                        <i class="fas fa-minus"></i>
                    </button>
                    &nbsp;&nbsp;<span class="quantity">${item.amount}</span>&nbsp;&nbsp;
                    <button class="quantity-plus" onclick="removeElement()" data-id=${item.id}>
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div class="cart-right-remove">
                    &nbsp;&nbsp;<button class="cart-remove-btn" onclick="removeElement()" data-id=${item.id}>
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
				</div>
        `;
		 cartContent.appendChild(li);
    }
	
    showCart() {
        cartBtn.click();
    }

    setupAPP() {
        cart = Storage.getCart();
        this.saveCartValues(cart);
        this.populateCart(cart);
    }

    populateCart(cart) {
        cart.forEach(item => this.addCartItem(item));
    }

    cartLogic() {
        clearCartBtn.addEventListener("click", () => {
            this.clearCart();
        })
		
	    checkoutCartBtn.addEventListener("click", () => {
            this.checkoutCart();
        })

        cartContent.addEventListener("click", event => {
            if (event.target.classList.contains("cart-remove-btn")) {
                let removeItem = event.target;
                let id = removeItem.dataset.id;
                removeItem.parentElement.parentElement.parentElement.remove();
                this.removeItem(id);
            } else if (event.target.classList.contains("quantity-minus")) {
                let lowerAmount = event.target;
                let id = lowerAmount.dataset.id;
                let tempItem = cart.find(item => item.id === id);
                tempItem.amount = tempItem.amount - 1;
                if (tempItem.amount > 0) {
                    Storage.saveCart(cart);
                    this.saveCartValues(cart);
                    lowerAmount.nextElementSibling.innerText = tempItem.amount;
                } else {
                    lowerAmount.parentElement.parentElement.parentElement.remove();
                    this.removeItem(id);
                }
            } else if (event.target.classList.contains("quantity-plus")) {
                let addAmount = event.target;
                let id = addAmount.dataset.id;
                let tempItem = cart.find(item => item.id === id);
                tempItem.amount = tempItem.amount + 1;
                Storage.saveCart(cart);
                this.saveCartValues(cart);
                addAmount.previousElementSibling.innerText = tempItem.amount;
            }
        })
    }


    clearCart() {
		
        let cartItems = cart.map(item => item.id);
        cartItems.forEach(id => this.removeItem(id));
        while (cartContent.children.length > 0) {
            cartContent.removeChild(cartContent.children[0])
        }
    }
	
	checkoutCart() {
		
		 var yazilacak = "" ; 
		 var ttprice = 0 ;
		 var tprice = 0 ;

    const myJSON = JSON.parse(localStorage.getItem("cart"));

var myObj = myJSON;

for ( var baslangic = 0 ; baslangic <  myObj.length ; baslangic ++ ) {

tprice = myObj[baslangic].amount * myObj[baslangic].price ;
tprice = parseFloat(tprice.toFixed(2));
ttprice = ttprice + tprice ;
ttprice = parseFloat(ttprice.toFixed(2));


yazilacak += "<br>" + myObj[baslangic].amount + " adet x " + myObj[baslangic].title + " ( " + myObj[baslangic].price + " )  = " + tprice +" "+ kurlar +"<br>";

}

	
yazilacak += "<br>Toplam tutar : " + ttprice +" "+ kurlar + " (Bilgi Amaçlıdır!)";

yazilacak += "<br><br>Bu sipariş için onay alabilir miyim ? ";



if ( baslangic > 0 ){
	
let wsparis = yazilacak.replace(/<br>/gi, "%0a");


var url = "https://wa.me/+905337063970?text="
+"Organik Ali Amca Alışveriş Sepeti"+"%0a"
+"-------------------------------------"+"%0a"
+wsparis+"%0a"+"%0a"
+"Sipariş Verenin Adı Soyadı :  ";

	
	let text = document.getElementById("demo").innerHTML = yazilacak + ` <a href="${url}" target=_blank" > <button class="btn-checkout" type="button" >MESAJI GÖNDER</button></a>`;
		 		 
}
else {

		 let text = document.getElementById("demo").innerHTML = "";
}
    }

    removeItem(id) {
        cart = cart.filter(item => item.id !== id);
        this.saveCartValues(cart);
        Storage.saveCart(cart);
        let button = this.getSinleButton(id);
        button.disabled = false;
        button.style.opacity = "1";
    }
	
    getSinleButton(id) {
        return buttonsDOM.find(button => button.dataset.id === id);
    }
}

class Storage {
    static saveProducts(products) {
        localStorage.setItem("products", JSON.stringify(products));
    }

    static getProduct(id) {
        let products = JSON.parse(localStorage.getItem("products"));
        return products.find(product => product.id === id);
    }

    static saveCart(cart) {
        localStorage.setItem("cart", JSON.stringify(cart));
    }

    static getCart() {
        return localStorage.getItem("cart") ? JSON.parse(localStorage.getItem("cart")) : [];
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const ui = new UI();
    const products = new Products();

    ui.setupAPP();

    products.getProducts().then(products => {
        ui.displayProducts(products);
        Storage.saveProducts(products);
    }).then(() => {
        ui.getBagButtons();
        ui.cartLogic();
    })
});


function removeElement() {
  document.getElementById("demo").style.display = "none";
}
function changeVisibility() {
  document.getElementById("demo").style.display = "block";
  document.getElementById("demo").style.visibility = "visible";
}