import { useState } from 'react';

export function UserForm({ data = { username: '', password: '', passwordVerification: ''}, onSubmit }) {
	const [ formData, setFormData ] = useState(data);
	const { username, password, passwordVerification } = formData;
	const onInputChange = evt => {
		const name = evt.target.name;
		const value = evt.target.value;
		setFormData({ ...formData, [name]: value });
	}
	const dispatchSubmit = evt => {
		evt.preventDefault();
		if (typeof onSubmit === 'function') onSubmit(formData); 
	};
	return (
		<form className="form" onSubmit={dispatchSubmit}>
			<div className="field">
				<label className="label" htmlFor="username">Nom d'utilisateur</label>
				<div className="control">
					<input type="text" name="username" value={username} onChange={onInputChange} />
				</div>
			</div>
			<div className="field">
				<label className="label" htmlFor="password">Mot de passe</label>
				<div className="control">
					<input type="password" name="password" autoComplete='new-password' value={password} onChange={onInputChange} />
				</div>
			</div>
			<div className="field">
				<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
				<div className="control">
					<input type="password" name="passwordVerification" autoComplete='new-password' value={passwordVerification} 
						onChange={onInputChange} />
				</div>
			</div>
			<button type="submit" className="button">Envoyer</button>
		</form>
	);
};