import { useState } from "react";

function Compteur() {
    const [compte, setCompte] = useState(0);
    // useState(valeurInitiale) retourne [valeurActuelle, fonctionDeMiseAJour]

    return (
        <div>
            <p>Compte : {compte}</p>
            <button onClick={() => setCompte(compte + 1)}>+1</button>
            <button onClick={() => setCompte(compte - 1)}>-1</button>
        </div>
    );
}

// Le state est asynchrone/batché : ne JAMAIS lire l'ancienne valeur pour calculer la nouvelle
function CompteurBuggue() {
    const [compte, setCompte] = useState(0);

    function tripler() {
        setCompte(compte + 1); // ces 3 appels utilisent tous la MÊME valeur "compte" figée
        setCompte(compte + 1); // du rendu en cours -> résultat final : +1, pas +3
        setCompte(compte + 1);
    }

    return <button onClick={tripler}>Compte : {compte}</button>;
}

// CORRECT : forme "updater", reçoit toujours la dernière valeur réelle
function CompteurCorrige() {
    const [compte, setCompte] = useState(0);

    function tripler() {
        setCompte((c) => c + 1);
        setCompte((c) => c + 1);
        setCompte((c) => c + 1); // résultat final : +3, comme attendu
    }

    return <button onClick={tripler}>Compte : {compte}</button>;
}

// State avec des objets/tableaux : toujours créer une NOUVELLE référence, jamais muter
function Formulaire() {
    const [utilisateur, setUtilisateur] = useState({ nom: "", email: "" });

    function majNom(e) {
        // MAUVAIS : utilisateur.nom = e.target.value -- mutation directe, React ne redétecte pas le changement
        setUtilisateur({ ...utilisateur, nom: e.target.value }); // BON : nouvel objet
    }

    return (
        <input
            value={utilisateur.nom}
            onChange={majNom}
            placeholder="Votre nom"
        />
    );
}

function ListeTaches() {
    const [taches, setTaches] = useState([]);

    function ajouter(texte) {
        setTaches([...taches, { id: Date.now(), texte, faite: false }]); // nouveau tableau
    }

    function basculer(id) {
        setTaches(taches.map((t) =>
            t.id === id ? { ...t, faite: !t.faite } : t
        ));
    }

    function supprimer(id) {
        setTaches(taches.filter((t) => t.id !== id));
    }

    return (
        <ul>
            {taches.map((t) => (
                <li key={t.id} onClick={() => basculer(t.id)}>
                    {t.faite ? "[x]" : "[ ]"} {t.texte}
                </li>
            ))}
        </ul>
    );
}

// Initialisation paresseuse : évite de recalculer une valeur coûteuse à chaque rendu
function Composant() {
    const [donnees] = useState(() => calculCouteux()); // exécuté UNE SEULE FOIS, au montage
    // useState(calculCouteux()) exécuterait la fonction À CHAQUE rendu, même si le résultat est ignoré
    return <div>{donnees}</div>;
}