import React, { useState } from 'react' 
import array from './array';
import { v4 as uuid } from 'uuid';
import { Link, useNavigate } from 'react-router-dom';
  
export default function Create() {
  
    // Making usestate for setting and
    // fetching a value in jsx
    const [name, setname] = useState('');
    const [age, setage] = useState('');
  
    // Using useNavigation for redirecting to pages
    let history = useNavigate();
  
    // Function for creating a post/entry
    const handelSubmit = (e) =>{
        e.preventDefault();  // Prevent reload
  
        const ids = uuid() // Creating unique id
        let uni = ids.slice(0,8) // Slicing unique id
  
        // Fetching a value from usestate and 
        // pushing to javascript object
        let a = name, b=age
        array.push({id:uni,Name:a,Age:b})
  
  
       // Redirecting to home page after creation done
       history('/')
         
    }
  
    return (
	<div>
	    <h1>Create</h1>
	    <form
		onSubmit={e => handelSubmit(e)}
	    >
		<label>
		    Enter name (input:{name}):
		    <input
			onChange={e => setname(e.target.value)}
			type="text"
			placeholder="Enter Name"
			required
		    />
		</label>
		<label>
		    Enter name (input:{age}):
		    <input
			onChange={e => setage(e.target.value)}
			type="text"
			placeholder="Enter Age"
			required
		    />
		</label>
		<button
		    onClick={e => handelSubmit(e)}
		    type="submit"
		>
		    Create
		</button>
		<Link
		    to='/'
		>
		    <button>
			Home
		    </button>
		</Link>
	    </form>
	</div>
    );
};
