//Como hacer loops con arrays
import { useState, useEffect } from "react";//useState permite re-render el html mientras que useEffect corre cada vez que se renderea el html

//Tu sub componente, puede tener hijos tambien
import Lista from "./SubSubComponente" //esto importa el menu de otro componente "hijo"

const Arrays = () => {
	/*Original trayendo los datos desde una variable
	const [blogs, setBlogs] = useState([//De igual manera creas una variable y un hook, por convención los llamas "setAlgo" aunque no es obligacion
	{ title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
	{ title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
	{ title: 'Web dev top tips', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', author: 'mario', id: 3 }
	]);
	/**/
	//	Asi es cuando usas la API Json para traer datos:
	const [blogs, setBlogs] = useState(null);
	let [isLoading, setLoading]=useState(true);
	const [error, setError]=useState(null);

	const titulo="Loops de objetos pasado con props";

	useEffect( () => {//esto corre solo al cargar la página inicialmente
		console.log("Este es el Rendereo inicial");
		
		/*Aqui es un buen lugar para traer los datos iniciales de la base de datos. Esto lo haces en forma de JSON con APIs
		
		puedes usar jsonServer que te permite crear APIs para interactuar con una DB y crear este archivo en este folder
		https://www.youtube.com/watch?v=mAqYJF-yxO8&list=PL4cUxeGkcC9i2v2ZqJgydXIcRq_ZizIdD&ab_channel=TheNetNinja
	
		O puedes hacer trampa y escribir el siguiente json directo y abrir una consola NUEVA que emule un servidor API
		por ejemplo te muestra el json en http://localhost:8001/blogs como lo haria una API en vivo
		pon el siguiente comando que abre este archivo en el puerto 8000 (o 3001, lo que sea) para no chocar con tu react corriendo
		npx json-server --watch RutaALaCarpetaDesdeLaTerminal/database.json --port 8000
		
		Hay 4 endpoints: 
		Con Get, 
			/blogs trae todo como pasa en http://localhost:8001/blogs
			/blogs/{id} trae ese post, z.b. http://localhost:8001/blogs/2
		Con Post,
			/blogs crea un post nuevo
			/blogs/{id} borra ese post
		
		y para usarlo:
		*/
		fetch("http://localhost:3001/blogs")
			.then(//then es una promesa asincrona, que solo corre hasta que fetch acaba y si acaba
				res=>{
					//console.log(res);
					if(!res.ok){//si hay un error en el servidos
						setError("Hubo un error al traer la info del servidor");
						setLoading(false);//para que no salga si es error
					}else{
						return res.json();
					}
				}
			)
			.then(//Y solo cuando acabas de convertir el json a un objeto o variable, ya la usas
				data=>{
					//console.log(data);//la data traida es esta
					setTimeout(function() {   //Para emular que tarda en cargar...
						setBlogs(data);
						console.log("Termine de traer la info de la BDD");
						setLoading(false);
					}, 3000);
				}
			)//Como esta tarda en ejecutarse tienes que poner {blogs && <Lista />}  para que primero cheque si blogs no esta null antes de hacer el echo de <Lista />
			.catch(err => {
				setError("Se presento el error al conectar");
				setLoading(false);//para que no salga si es error
				//Es mejor throw Error (o setError ) porque crea una var Error que puedes usar en otros lados que console.log
				//console.log("Se presento el error al conectar (y ya hace algo):"); console.log(err);}
			})
		;
	},[]); // al pasar el segundo argumento ,[] hace que solo corra en el render inicial, no en los refresh de useState
	
	useEffect( () => {//al carga la página inicialmente o cuando cambia la variable "blogs" en este caso
		console.log("Hubo un cambio en blogs:");
		console.log(blogs);
	},[blogs]); // al pasar el segundo argumento ,[] hace que solo corra en el render inicial, no en los refresh de useState

	useEffect( () => {//esto corre cada vez que se renderea (algo cambia o carga la página inicialmente)
		console.log("Se rendereo el contenido. Cambiaron las variables");
	});//AGUAS si se combina con useState caes en un loop infinito...

	return (
	<div className="array">{/*Siempre tiene que ir todo lo del return dentro de un div parece...*/}
		
		{ error && <p>{error}</p>}
		{ isLoading && <p>Esta cargando...</p>}
		{blogs && <Lista PropsDeBlogs={blogs} TituloDelH2={titulo} funcBorrar={handleBorrar} />
		/*Asi pasas la variable blogs al componente hijo, no importa como llames a "PropsDeBlogs" */}
		{blogs && <Lista PropsDeBlogs={blogs.filter( (feach)=> feach.author=="yoshi" ) } TituloDelH2="Componente rehusado con filtro solo Yoshi" funcBorrar={handleBorrar} />} 		
	</div>
	);
	
	function handleBorrar(id){ //También podría ser const handleBorrar=(id)=>{...} pero no la reconoce si no va antes del return (hoisting)
		let newBlogs = blogs.filter(
			feach => feach.id !== id
		);
		setBlogs(newBlogs);//esto refresca la var blogs
		alert("Borrado o filtrado mas bien porque esta hardcoded: "+id);
	}
}
 
export default Arrays;