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":"Yapışkanlı Banyo Mutfak Düzenleyici Raf ( Rulolu )","image":"Yapışkanlı Banyo Mutfak Düzenleyici Raf ( Rulolu )","price":119},{"id":"2","title":"Yapışkanlı Siyah 3\u2019Lü Set Banyo Düzenleyici","image":"Yapışkanlı Siyah 3\u2019Lü Set Banyo Düzenleyici","price":209},{"id":"3","title":"2li Set Şampuanlık Banyo Düzenleyici Yapışkanlı","image":"2li Set Şampuanlık Banyo Düzenleyici Yapışkanlı","price":199}]; //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/+905059421312?text="
+"Mine Home 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";
}