const init = () => {
	fetchData();
	actualizarCarrito();
};

/* INSTANCIACIÓN */
const carrito = new Carrito();
//OPERADOR LOGICO AND
localStorage.getItem("MI_CARRITO") && carrito.recuperarDatos();

let stock;
const fetchData = async () => {
	try {
		const res = await fetch("js/data/productos.json");
		const data = await res.json();
		stock = data;
		pintarInventario(stock);
	} catch (error) {
		console.log(error);
	}
};

const pintarInventario = (data) => {
	data.forEach((categoria) => {
		const productos = categoria.modelos;
		const nombreCategoria = categoria.nombre;
		productos.forEach((prod) => {
			const { id, nombre, precio, imagen } = prod;
			let card = document.createElement("div");
			card.setAttribute("class", "card");

			card.innerHTML = `
		<div class = 'content'>
			<div class ='img'>
				<img src= '${imagen}'></img>
			</div>
        	<div class ='details'>
				<div class ='cardText'>
        			<h4 class='nombreProducto'>${nombre}</h4>
        			<a href='${categoria.url}' target='_blank' class = 'categoria'>${categoria.nombre}</a>
        			<p> $${precio}</p>
        		</div>
				<a id='agregar${id}' class='btnAdd' title = 'Add to cart'>+</a>
			</div>
		</div>`;

			//Anido card al contenedor de productos
			contenedorProductos.appendChild(card);

			const btnAdd = document.getElementById(`agregar${id}`);
			btnAdd.addEventListener("click", () => {
				agregarAlCarrito(`${categoria.nombre}`, id);
				actualizarCarrito();
				showMessage("Successfully added 😀", "success");
			});
		});
	});
};

// Contenedor de todos los productos del carrito
const productosDelCarrito = document.getElementById("productosDelCarrito");

/* FUNCIÓN QUE MUESTRA TODAS LAS CARACTERÍSTICAS DEL CARRITO
DE ACUERDO A LA INTERACCIÓN DEL USUARIO*/

const actualizarCarrito = () => {
	productosDelCarrito.innerHTML = "";
	carrito.productos.forEach((producto) => {
		// DESTRUCTURING
		const { id, imagen, nombre, cantidad, precio } = producto;

		//hago el cálculo de cantidad del producto por su precio
		let sumaPorProducto = cantidad * precio;
		//creo el div para cada modelo seleccionado
		const cardCarrito = document.createElement("div");
		cardCarrito.setAttribute("class", "cardEnMiCarrito");

		cardCarrito.innerHTML = `
		<img class='imgCard' src= '${imagen}'></img>
		<div class='infoCard'>
			<h4>${nombre}</h4>
			<p id='cantidad'>QUANTITY: ${cantidad} x <span>$${precio.toFixed(2)}</span></p>
		</div>
    	<div>
    		<b class='sumaPorProducto'> $${sumaPorProducto.toFixed(2)}</b>
		</div>
		<p class = 'borrarProducto' id = 'remover${id}'> x </p>`;
		//Anido cardCarrito al contenedor del carrito
		productosDelCarrito.appendChild(cardCarrito);

		const btnRemover = document.getElementById(`remover${id}`);
		btnRemover.addEventListener("click", () => {
			showMessage("Successfully removed 😢", "caution");
			borrarProducto(id);
			actualizarCarrito();
		});
	});

	//muestra la cantidad de productos que añadí al Carrito
	document.getElementById("contadorCarrito").innerText =
		carrito.productos.reduce((acc, prod) => acc + prod.cantidad, 0);

	//muestra el valor total de mi compra
	document.getElementById("valorTotal").innerHTML = `${carrito.total}`;
	carrito.guardar();
};

//FUNCIÓN QUE AGREGA EFECTIVAMENTE LOS PRODUCTOS AL CARRITO
const agregarAlCarrito = (categoria, prodId) => {
	console.log(stock);
	const existe = carrito.productos.some((prod) => prod.id === prodId);
	const producto = stock
		.find((cat) => cat.nombre === categoria)
		.modelos.find((prod) => prod.id === prodId);

	//  OPERADOR TERNARIO
	existe
		? carrito.productos.map((prod) => {
				if (prod.id === prodId) {
					prod.cantidad++;
				}
		  })
		: carrito.productos.push(producto);

	carrito.calcularTotal();
	carrito.guardar();
};

//FUNCIÓN PARA BORRAR PRODUCTO DEL CARRITO
const borrarProducto = (prodId) => {
	const producto = carrito.productos.find((prod) => (prod.id = prodId));
	const indice = carrito.productos.indexOf(producto);

	carrito.productos.map((item) => (item.cantidad = 1));
	carrito.productos.splice(indice, 1);
	carrito.calcularTotal();
	carrito.guardar();
};

// Botón dentro del modal del carrito que permite realizar la compra de los productos seleccionados
const botonComprarProductos = document.getElementById("comprarProductos");

// FUNCIÓN PARA REALIZAR LA COMPRA DE LOS PRODUCTOS EN EL CARRITO
const comprarProductos = () => {
	botonComprarProductos.addEventListener("click", () => {
		if (carrito.productos.length > 0) {
			showMessageCentered(
				`<img src = 'img/comprobado.png' class = 'checked'></img>
				<p> Thank you for your Purchase!</p>`,
				"buy"
			);
			//vacio el carrito porque ya ejecuté la compra
			vaciarCarrito();
			//luego actualizo
			actualizarCarrito();
		} else {
			showMessage("Nothing to buy 🥱", "error");
		}
	});
};

//Botón ubicado dentro del modal -carrito con una cruz roja-
const botónVaciarCarrito = document.getElementById("vaciarCarrito");

//FUNCIÓN PARA ELIMINAR TODOS LOS PRODUCTOS DEL CARRITO
const eliminarProductos = () => {
	botónVaciarCarrito.addEventListener("click", () => {
		if (carrito.productos.length > 0) {
			//Llamo a la función que permite eliminar todos los productos
			vaciarCarrito();
			showMessage("Successfully emptied 😣", "caution");
			actualizarCarrito();
		} else {
			showMessage("Nothing to empty 🥱", "error");
		}
	});
};

//FUNCIÓN QUE EFECTIVAMENTE BORRA TODOS LOS PRODUCTOS DEL CARRITO
const vaciarCarrito = () => {
	carrito.productos.map((item) => (item.cantidad = 1));
	carrito.productos = [];
	carrito.calcularTotal();
	carrito.guardar();
};