# Source: components/registerForm/RegisterForm.js

    import {useState} from "react";
    import  "../../utils/module";
    import {isAdult, isValidCodePost, isValidEmail, isValidName} from "../../utils/module";

    /**
     * Formulaire d'inscription utilisateur.
     *
     * Champs : prénom, nom, email, date de naissance, code postal, ville.
     * - Affiche un message d'erreur en rouge sous chaque champ invalide.
     * - Le bouton "Send" est désactivé tant que les champs ne sont pas tous valides.
     * - À la soumission : enregistre l'utilisateur dans `localStorage` (clé `users`),
     *   affiche un toaster de succès et vide le formulaire.
     *
     * Règles de validation (voir `utils/module.js`) :
     * - prénom, nom, ville : lettres, accents, trémas, tirets, apostrophes, espaces.
     * - email : format `local@domaine.ext`.
     * - code postal : 5 chiffres (format français).
     * - date de naissance : majorité requise (>= 18 ans).
     *
     * @component
     * @returns {JSX.Element} Le formulaire d'inscription.
     */
    export default function RegisterForm() {

        const [firstname, setFirstname] = useState("")
        const [name, setName] = useState("");
        const [email, setEmail] = useState("");
        const [birth, setBirth] = useState("");
        const [postcode, setPostcode] = useState("");
        const [city, setCity] = useState("");

        const [showData, setShowData] = useState(false);
        const [users, setUsers] = useState([]);
        const [toast, setToast] = useState("");

        function toggleGetData() {
            if (showData) {
                setShowData(false);
                return;
            }
            const list = JSON.parse(localStorage.getItem("users")) || [];
            setUsers(list);
            setShowData(true);
        }

        const firstnameError = firstname && !isValidName(firstname) ? "Invalid firstname" : "";
        const nameError = name && !isValidName(name) ? "Invalid name" : "";
        const emailError = email && !isValidEmail(email) ? "Invalid email" : "";
        const postCodeError = postcode && !isValidCodePost(postcode) ? "Invalid postcode" : "";
        const cityError = city && !isValidName(city) ? "Invalid city" : "";
        const birthError = birth && !isAdult(new Date(birth)) ? "You are too young" : "";

        const isFormValid =
            firstname && name && email && birth && postcode && city &&
            isValidName(firstname) && isValidName(name) && isValidName(city) &&
            isValidEmail(email) && isValidCodePost(postcode) &&
            isAdult(new Date(birth));

        function handleSubmission() {
            let userData = {
                FirstName: firstname,
                Name: name,
                Email: email,
                Birth: birth,
                Postcode: postcode,
                City: city,
            };
            const list = JSON.parse(localStorage.getItem('users')) || [];
            list.push(userData);
            localStorage.setItem('users', JSON.stringify(list));
            setToast("Saved Successfully");
            setTimeout(() => setToast(""), 3000);
            setFirstname("");
            setName("");
            setEmail("");
            setBirth("");
            setPostcode("");
            setCity("");
        }

        return(
            <div>
                <label htmlFor="firstname">First Name </label>
                <input
                    id="firstname"
                    type="text"
                    name="first name"
                    placeholder="Type your first name"
                    onChange={(e) => setFirstname(e.target.value)}
                    value={firstname}
                />
                {firstnameError && <span style={{color: 'red'}}>{firstnameError}</span>}

                <label htmlFor="name"> Name </label>
                <input
                    id="name"
                    type="text"
                    name="name"
                    placeholder="Type your name"
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                />
                {nameError && <span style={{color: 'red'}}>{nameError}</span>}

                <label htmlFor="email"> Email </label>
                <input
                    id="email"
                    type="email"
                    name="email"
                    placeholder="Type your email"
                    onChange={(e) => setEmail(e.target.value)}
                    value={email}
                />
                {emailError && <span style={{color: 'red'}}>{emailError}</span>}

                <label htmlFor="birth"> birth </label>
                <input
                    id="birth"
                    type="date"
                    name="birth"
                    placeholder="Type your birth"
                    onChange={(e) => setBirth(e.target.value)}
                    value={birth}
                />
                {birthError && <span style={{color: 'red'}}>{birthError}</span>}

                <label htmlFor="postcode"> postcode </label>
                <input
                    id="postcode"
                    type="text"
                    name="postcode"
                    placeholder="Type your postcode"
                    onChange={(e) => setPostcode(e.target.value)}
                    value={postcode}/>
                {postCodeError && <span style={{color: 'red'}}>{postCodeError}</span>}

                <label htmlFor="city"> city </label>
                <input
                    id="city"
                    type="text"
                    name="city"
                    placeholder="Type your city"
                    onChange={(e) => setCity(e.target.value)}
                    value={city}/>
                {cityError && <span style={{color: 'red'}}>{cityError}</span>}

                <button onClick={handleSubmission} disabled={!isFormValid}>Send</button>

                <button onClick={toggleGetData}>Show registered users</button>

                {toast && (
                    <div
                        role="alert"
                        data-testid="toast"
                        style={{
                            position: 'fixed',
                            bottom: 20,
                            right: 20,
                            background: '#16a34a',
                            color: 'white',
                            padding: '10px 16px',
                            borderRadius: 4,
                        }}
                    >
                        {toast}
                    </div>
                )}

                {showData && (
                    <div className="data" data-testid="users-list">
                        {users.length === 0 ? (
                            <div>No registered users</div>
                        ) : (
                            users.map((u, i) => (
                                <div key={i} className="user-item">
                                    <div>First Name - {u.FirstName}</div>
                                    <div>Name - {u.Name}</div>
                                    <div>Email - {u.Email}</div>
                                    <div>Birth - {u.Birth}</div>
                                    <div>Postcode - {u.Postcode}</div>
                                    <div>City - {u.City}</div>
                                </div>
                            ))
                        )}
                    </div>
                )}
            </div>)

    }