//Esto te permite crear una form y guardar esa info
import { useState } from "react";//useState permite re-render el html
import { useHistory } from "react-router-dom";//esto permite acceder al historial del navegador

const Create = () => {
	//Estos son los valores del form, que realmente se actualizan con JS mas abajo en setTitle, setBody, etc...
	const [title, setTitle] = useState('');//si esto no es '' ya no te dejaria usar el inputbox, seria solo read
	const [body, setBody] = useState('');
	const [author, setAuthor] = useState('yoshi');//aqui si lo das valor porque es un select si quieres o toma el primero

	const [enviado, setEnviado] = useState(false);//por si aun no se captura o si ya se capturo
	
	const history = useHistory();//esto permite ver el historial de uris del navegador
	
	function submit(e){
		e.preventDefault();//para que no haga refresh al submit
		let blog={title, author, body};
		//console.log(blog);
			setEnviado(true);//ee va a enviar deshabilita boton
		
		//ahora directamente (podrias hacer un custom hook tambien)
		setTimeout(function() { //para emular que tarde, en la vide real es una API
    	fetch('http://localhost:3001/blogs/', {//dices que va a ser post y conviertes el objeto a json
		  method: 'POST',
		  headers: { "Content-Type": "application/json" },
		  body: JSON.stringify(blog)
			})
			.then(() => {//usas then cuando haces una promesa
		  console.log('new blog added');
			setEnviado(false);//ya se envio
			//history.go(-1);//esto te lleva n paginas atras en la historia o adelante si positivo
			history.push("/");//esto es un redirect
		});
		}, 2000);
	}
  return (
    <div className="create">
      <h2>Add a New Blog</h2>
      <form onSubmit={submit}>{/*Asi llamas a una función al hacer submit*/}
        <label>Blog title:</label>
        <input 
          type="text" 
          required 
          placeholder="titulo placeholder"
          value={title /*Esto haria el output si hubiera un valor que jalaras de la BDD*/}
          onChange={(e) => setTitle(e.target.value) /*la e es event object del objeto, es como .change() en JQuery*/}
        />
        <label>Blog body:</label>
        <textarea
          required
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <label>Blog author:</label>
        <select
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        >
          <option value="mario">mario</option>
          <option value="yoshi">yoshi</option>
        </select>
		  {!enviado && <button>Add Blog</button>}
		  {enviado && <button disabled>Guardando, espera...</button>}
      </form>
		<hr className="separasecciones"/>
		<h2>Preview en tiempo real por useState:</h2>
		<p>Title: {title}</p>
		<p>Author: {author}</p>
		<p>Body: {body}</p>
    </div>
  );
}
 
export default Create;