import { useState } from "react";
import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";

export default function App() {
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const onSubmit = data => console.log(data);

    return (
        <div className="inventaire-form-container">
            <form onSubmit={handleSubmit(onSubmit)}>
                <h4 className="text-center">Formulaire de commande</h4>
                <div className="Error_color">
                <div className="form-group">
                    <label>Prénom: </label>
                    <input placeholder="Votre prénom:" {...register("Prénom", { required: true, minLength: 2})} />
                </div>
                <div>
                    {errors.Prénom && errors.Prénom.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
                    {errors.Prénom && errors.Prénom.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
                </div>
                <div className="form-group">
                    <label>Nom: </label>
                    <input placeholder="Votre nom:" {...register("Nom", { required: true, minLength: 2})} />
                </div>
                <div>
                    {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
                    {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
                </div>
                <div className="form-group">
                    <label>Numéro de téléphone: </label>
                    <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
                </div>
                <div>
                    {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
                    {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
                </div>
                <div className="form-group">
                    <label>Adresse civique: </label>
                    <input placeholder="Votre adresse:" {...register("Adresse", { required: true })} />
                </div>
                <div>
                    {errors.Adresse && errors.Adresse.type === 'required' && <span>Vous devez entrer une adresse!</span>}
                </div>
                <div className="form-group">
                    <label>Adresse courriel: </label>
                    <input placeholder="Votre courriel" {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
                </div>
                <div>
                {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
                {errors.Email && errors.Email.type === 'pattern' && <span>Adresse courriel non valide!</span>}
                </div>
                </div>
                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Confirmer</Button>
            </form>
        </div>
    )
}