import 'package:flutter/material.dart';
import '../../../core/utils/app_logger.dart';

/// Un champ permettant à l'utilisateur de saisir des tags.
/// Il permet également d'afficher les tags saisis sous forme de chips (étiquettes).
class TagsField extends StatefulWidget {

  // Constructeur qui prend la fonction onSaved pour transmettre les tags au formulaire.
  const TagsField({required this.onSaved, super.key});
  // Fonction de rappel pour sauvegarder la liste des tags saisis.
  final Function(List<String>) onSaved;

  @override
  _TagsFieldState createState() => _TagsFieldState(); // Création de l'état pour gérer les tags.
}

class _TagsFieldState extends State<TagsField> {
  final TextEditingController _controller = TextEditingController(); // Contrôleur pour gérer l'entrée de texte.
  List<String> _tags = []; // Liste pour stocker les tags saisis.

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start, // Alignement à gauche pour les éléments.
      children: [
        const SizedBox(height: 8), // Espacement entre le titre et le champ de saisie.
        TextFormField(
          controller: _controller, // Associe le contrôleur à ce champ de texte.
          decoration: InputDecoration(
            hintStyle: const TextStyle(color: Colors.blueGrey),
            hintText: 'Entrez un les tags ici séparés par des virgules...',
            labelText: 'Tags', // Texte d'étiquette pour le champ de saisie.
            labelStyle: const TextStyle(
              color: Colors.blueGrey, // Couleur de l'étiquette en blueGrey.
            ),
            prefixIcon: const Icon(
              Icons.tag, // Icône représentant un tag.
              color: Colors.blueGrey, // Couleur de l'icône.
            ),
            border: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12)), // Bordure arrondie.
              borderSide: BorderSide.none, // Pas de bordure par défaut.
            ),
            enabledBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12)),
              borderSide: BorderSide(
                color: Colors.blueGrey, // Bordure de base.
                width: 1.5, // Largeur de la bordure.
              ),
            ),
            focusedBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12)),
              borderSide: BorderSide(
                color: Colors.blue, // Bordure bleue au focus.
                width: 2,
              ),
            ),
            filled: true, // Le champ est rempli avec une couleur de fond.
            fillColor: Colors.blueGrey.withOpacity(0.1), // Couleur de fond du champ de texte avec opacité.
          ),
          onFieldSubmitted: (value) {
            AppLogger.d('Tags soumis : $value', tag: 'TagsField');
            _addTags(value); // Appel à la méthode _addTags pour ajouter les tags.
          },
        ),
        const SizedBox(height: 8), // Espacement entre le champ de saisie et les chips.
        Wrap(
          spacing: 8, // Espacement entre les chips.
          children: _tags.map((tag) => Chip(
            label: Text(tag), // Texte du tag à afficher.
            backgroundColor: Colors.blueGrey.withOpacity(0.2), // Couleur de fond des chips.
            labelStyle: const TextStyle(color: Colors.blueGrey), // Couleur du texte dans les chips.
          ),).toList(), // Génère une liste de Chips pour chaque tag.
        ),
      ],
    );
  }

  // Fonction pour ajouter les tags à la liste.
  void _addTags(String value) {
    setState(() {
      _tags = value.split(',') // Sépare les tags par des virgules.
          .map((tag) => tag.trim()) // Supprime les espaces autour des tags.
          .where((tag) => tag.isNotEmpty) // Exclut les tags vides.
          .toList(); // Crée la liste de tags.
    });
    AppLogger.d('Tags ajoutés : $_tags', tag: 'TagsField');
    widget.onSaved(_tags); // Envoie la liste des tags au formulaire principal.
  }
}
