//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"
//Tu custom hook (subcomponente) para interactuar con la base de datos
import useFetch from "./CustomHookFetchBaseDeDatos";

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 usas un subcomponente para traer datos de la BDD

    //Asi es usando mi API propia que me permite correr SQL y te regresa objetos igual que JSON-Server, ya no hay que convertir si son multiples rows pero si es un row tienes que hacer un data.map(feach => ( para traer feach.id,feach.col,etc)) ...
    const linkApi="/api-bdd.php?pwd=amr&sql=";//la api tiene que estar en el mismo servidor o marca error de seguridad Access-Control-Allow-Origin
    const sql=encodeURI("SELECT * FROM blogs");//codifica el sql a la url, así haces lo que quieras...!!! modificar, borrar, etc...
  	//const { error, isLoading, data: blogs } = useFetch(linkApi+sql); //data: blogs solo renombra data como blogs

    //Asi es con JSON Server: 
  	const { error, isLoading, data: blogs } = useFetch('http://localhost:3001/blogs'); //data: blogs solo renombra data como blogs
    
	//const [misblogs, setMisBlogs] = useState(blogs); Ya no puedes borrar blogs, porque la variable data esta en otro subcomponente y necesitas algo como esto
	
	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");	
	},[]); // 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. Cambio la variable isLoading o blogs");
	});//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 ya no existe por eso esto tronaria y lo comente
		//setBlogs(newBlogs);//esto refresca la var blogs, tuviste que crear mis blogs para que esto funcione en este componente, ya que blogs lo traes desde data de un subcomponente
		alert("Borrado o filtrado mas bien porque esta hardcoded: "+id);
	}
}
 
export default Arrays;