import { ref, computed } from 'vue'

const prixHT = ref(100)
const tauxTva = ref(0.2)

// computed en lecture seule : recalculé UNIQUEMENT si ses dépendances (prixHT, tauxTva) changent,
// puis mis en cache jusqu'au prochain changement -> contrairement à une méthode, pas de recalcul à chaque rendu.
const prixTTC = computed(() => prixHT.value * (1 + tauxTva.value))

console.log(prixTTC.value) // 120
prixHT.value = 200
console.log(prixTTC.value) // 240, recalculé automatiquement

import { ref, computed } from 'vue'

const prenom = ref('Ada')
const nom = ref('Lovelace')

// computed avec getter ET setter : permet d'écrire dans une valeur dérivée
const nomComplet = computed({
  get() {
    return `${prenom.value} ${nom.value}`
  },
  set(nouvelleValeur) {
    const [p, ...reste] = nouvelleValeur.split(' ')
    prenom.value = p
    nom.value = reste.join(' ')
  },
})

nomComplet.value = 'Grace Hopper'
console.log(prenom.value, nom.value) // 'Grace' 'Hopper'

import { ref, watch, watchEffect } from 'vue'

const recherche = ref('')
const resultats = ref([])

// watch : réagit à UNE source précise, accès explicite à l'ancienne/nouvelle valeur,
// ne s'exécute PAS immédiatement par défaut.
watch(recherche, async (nouvelleValeur, ancienneValeur) => {
  if (!nouvelleValeur.trim()) {
    resultats.value = []
    return
  }
  const reponse = await fetch(`/api/recherche?q=${encodeURIComponent(nouvelleValeur)}`)
  resultats.value = await reponse.json()
}, {
  debounce: undefined, // Vue n'a pas de debounce natif : à implémenter soi-même (voir lesson composables)
  immediate: false,     // true = exécute aussi au montage
})

// watch sur plusieurs sources à la fois
const largeur = ref(0)
const hauteur = ref(0)
watch([largeur, hauteur], ([l, h], [ancienL, ancienH]) => {
  console.log(`aire: ${l * h}`)
})

// watch profond sur un objet imbriqué (coûteux : parcourt toute la structure)
const filtre = ref({ categorie: 'tous', prixMax: 1000 })
watch(filtre, (nv) => console.log('filtre changé', nv), { deep: true })

// watchEffect : suit AUTOMATIQUEMENT toutes les refs/reactive lues dans son corps,
// s'exécute immédiatement une première fois (pas besoin de `immediate: true`).
watchEffect(() => {
  console.log(`recherche actuelle: "${recherche.value}", ${resultats.value.length} résultat(s)`)
})

// Arrêter un watcher manuellement (utile hors du cycle de vie normal d'un composant)
const arreter = watchEffect(() => console.log(recherche.value))
arreter() // stoppe l'observation

// Piège classique : computed() ne doit JAMAIS avoir d'effet de bord (ex: appel réseau, mutation externe)
// -> pour un calcul asynchrone dérivé, utiliser watch/watchEffect + une ref séparée pour le résultat.

// Mauvais : effet de bord dans un computed
// const donnees = computed(() => { fetch('/api/x').then(...) })  // NE PAS FAIRE

// Bon : séparer la source réactive du résultat asynchrone
import { ref, watchEffect } from 'vue'
const id = ref(1)
const utilisateur = ref(null)
watchEffect(async () => {
  const idCourant = id.value
  const reponse = await fetch(`/api/utilisateurs/${idCourant}`)
  // vérifie que id n'a pas changé pendant l'attente (évite une "race condition")
  if (idCourant === id.value) {
    utilisateur.value = await reponse.json()
  }
})