//Este custom hook se usa para traer datos de la base de datos y se puede usar en otros lados
import { useState, useEffect } from "react";//useState permite re-render el html mientras que useEffect corre cada vez que se renderea el html

const useFetch = (url) => { //Se tiene que llamar a fuerza useAlgo
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(true);
  const [error, setError] = useState(null);

	useEffect( () => {
		/*
		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 tu propia api-bdd.php que de hecho te sirve para correr cualquier código sql y regresa jsons siempre... 
        Esta en la carpeta /public y copia en tu libreria/sql/API-BDD.php , ya solo configuras la conexion y el password en el archivo. 
        Siempre regresa rows, así que tienes que hacer un feach para acceder a feach.id, feach.columnaTal, etc .
        
		puedes usar jsonServer que te permite crear APIs para interactuar con una DB y crear este archivo en este folder
        Se instala global con el comando: npm install -g json-server
		https://www.youtube.com/watch?v=mAqYJF-yxO8&list=PL4cUxeGkcC9i2v2ZqJgydXIcRq_ZizIdD&ab_channel=TheNetNinja
	
		De mientras puedes hacer trampa y escribir el siguiente json directo y abrir una consola NUEVA que emule un jsonServer gracias a Node y 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, el method es POST
		Con Delete,
			/blogs/{id} borra ese post, el method es DELETE
		
		y para usarlo:
		*/
		
	  	const abortCont = new AbortController();//Esto se usa para evitar que se siga trayendo info si el contenido rendereado cambia a otra pestaña y ya no se necesita traer data. Digamos con esto al final solo se ejecuta una vez. Esto pasa con funciones asincronas y con el timeout
		
      	setTimeout(function() {   //Para emular que tarda en cargar...
			console.log("Falsamente estas haciendo una pausa de 3 seg para emular lo que tardaria en traer la data una API");
            console.log("el link de la api es "+url);
			fetch(url, { signal: abortCont.signal })//puedes traer distintas APIs que serian distintas tablas en este caso
			//y usas signal con el abortCont para que pause si es el caso
				.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
							throw Error("Hubo un error al traer la info del servidor");//esto envia el error a console
							//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);}
						}
						return res.json();
					}
				)
				.then(//Y solo cuando acabas de convertir el json a un objeto o variable, ya la usas
					data=>{//este data es local, no el mismo data de arriba
						//console.log(data);//la data traida es esta
						setData(data);
						console.log("Termine de traer la info de la BDD:");console.log(data);
						setLoading(false);
						setError(null);

					}
				)//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 => {
				   if (err.name === 'AbortError') {//si el error es porque abortamos, no hagas error ni el set porque seguiria marcando error
						console.log('fetch aborted');
					}else{
						setError("Se presento el error al conectar");//esto es si quieres mostrar el error en vez de throw
						setLoading(false);//para que no salga si es error
					}
				})
			;
		}, 3000);
		return () => abortCont.abort();//para el fetch si es que no se esta mostrando en esta pestaña
		
  }, [url])// al pasar el segundo argumento url, solo corre cada vez que le das una API (una vez por página en teoria)
  return { data, isLoading, error }; //asi el componente regresa un objeto con la info de la bdd
}
 
export default useFetch;