import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' as rootBundle;

class CategoryField extends StatefulWidget {
  // Ce callback est utilisé pour enregistrer la valeur sélectionnée dans le formulaire
  final FormFieldSetter<String> onSaved;

  // Constructeur de la classe CategoryField
  const CategoryField({Key? key, required this.onSaved}) : super(key: key);

  @override
  _CategoryFieldState createState() => _CategoryFieldState();
}

class _CategoryFieldState extends State<CategoryField> {
  // Variable pour stocker la catégorie sélectionnée par l'utilisateur
  String? _selectedCategory;

  // Map pour stocker les catégories et leurs sous-catégories
  Map<String, List<String>> _categoryMap = {};

  // Liste des éléments du menu déroulant
  List<DropdownMenuItem<String>> _dropdownItems = [];

  @override
  void initState() {
    super.initState();
    // Chargement des catégories dès que l'état est initialisé
    _loadCategories();
  }

  /// Méthode pour charger les catégories depuis un fichier JSON.
  /// Cette méthode récupère les catégories et sous-catégories depuis le fichier JSON
  /// et met à jour l'état du widget.
  Future<void> _loadCategories() async {
    try {
      // Chargement du fichier JSON à partir des ressources
      final String jsonString = await rootBundle.rootBundle
          .loadString('lib/assets/json/event_categories.json');

      // Décodage du fichier JSON pour obtenir un Map
      final Map<String, dynamic> jsonMap = json.decode(jsonString);

      // Map pour stocker les catégories et leurs sous-catégories
      final Map<String, List<String>> categoryMap = {};

      // Parcours des catégories et ajout des sous-catégories dans le map
      jsonMap['categories'].forEach((key, value) {
        categoryMap[key] = List<String>.from(value);
      });

      // Mise à jour de l'état avec les nouvelles données chargées
      setState(() {
        _categoryMap = categoryMap;
        _dropdownItems =
            _buildDropdownItems(); // Reconstruction des éléments du menu
      });

      // Log pour vérifier si les catégories ont bien été chargées
      debugPrint("Catégories chargées : $_categoryMap");
    } catch (e) {
      // Log en cas d'erreur lors du chargement
      debugPrint("Erreur lors du chargement des catégories : $e");

      // Affichage d'un message d'erreur à l'utilisateur si le chargement échoue
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(
              'Erreur lors du chargement des catégories. Veuillez réessayer plus tard.')));
    }
  }

  /// Méthode pour construire la liste des éléments du menu déroulant avec les catégories et sous-catégories.
  /// Cette méthode crée une liste d'éléments DropdownMenuItem pour afficher dans le DropdownButton.
  List<DropdownMenuItem<String>> _buildDropdownItems() {
    List<DropdownMenuItem<String>> items = [];

    // Parcours des catégories et ajout des sous-catégories dans le menu déroulant
    _categoryMap.forEach((category, subcategories) {
      // Ajouter une catégorie (non sélectionnable) comme en-tête
      items.add(
        DropdownMenuItem<String>(
          enabled: false,
          // Cette entrée est désactivée pour qu'elle ne soit pas sélectionnée
          child: Text(
            category,
            style: const TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
              color: Colors.blueGrey,
            ),
          ),
        ),
      );

      // Ajouter les sous-catégories associées à cette catégorie
      for (String subcategory in subcategories) {
        items.add(
          DropdownMenuItem<String>(
            value: subcategory, // Valeur de la sous-catégorie
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0),
              // Indentation pour les sous-catégories
              child: Text(
                subcategory,
                style: const TextStyle(color: Colors.blueGrey),
              ),
            ),
          ),
        );
      }
    });

    // Log pour vérifier le nombre d'éléments créés pour le menu déroulant
    debugPrint("Éléments créés pour le menu déroulant : ${items.length}");

    return items;
  }

  @override
  Widget build(BuildContext context) {
    // Si la liste des éléments est vide, afficher un indicateur de chargement
    return _dropdownItems.isEmpty
        ? const Center(
            child:
                CircularProgressIndicator()) // Affichage d'un indicateur de chargement pendant le chargement des données
        : DropdownButtonFormField<String>(
            value: _selectedCategory,
            // Valeur sélectionnée par l'utilisateur
            decoration: InputDecoration(
              labelText: 'Catégorie',
              // Libellé du champ
              labelStyle: const TextStyle(color: Colors.blueGrey),
              // Style du libellé
              filled: true,
              // Remplissage du champ
              fillColor: Colors.blueGrey.withOpacity(0.1),
              // Couleur de fond
              border: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(
                  color: Colors.blueGrey, // Couleur de la bordure par défaut
                  width: 2.0, // Épaisseur de la bordure
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(
                  color: Colors.blueGrey,
                  // Couleur de la bordure quand non sélectionné
                  width: 2.0,
                ),
              ),
              focusedBorder: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(
                  color: Colors.blue, // Bordure quand le champ est sélectionné
                  width: 2.0,
                ),
              ),
              prefixIcon: const Icon(Icons.category,
                  color: Colors.blueGrey), // Icône du champ
            ),
            style: const TextStyle(color: Colors.blueGrey),
            // Style du texte sélectionné
            dropdownColor: const Color(0xFF2C2C3E),
            // Couleur de fond du menu déroulant
            iconEnabledColor: Colors.blueGrey,
            // Couleur de l'icône du menu déroulant
            items: _dropdownItems,
            // Liste des éléments du menu déroulant
            onChanged: (String? newValue) {
              // Log pour suivre la valeur sélectionnée
              debugPrint("Nouvelle catégorie sélectionnée : $newValue");

              setState(() {
                _selectedCategory =
                    newValue; // Mise à jour de la catégorie sélectionnée
              });
            },
            onSaved: widget.onSaved,
            // Enregistrer la valeur dans le formulaire
            hint: const Text(
              'Veuillez choisir une catégorie',
              // Texte affiché lorsqu'aucune catégorie n'est sélectionnée
              style: TextStyle(
                  color: Colors.blueGrey), // Style du texte par défaut
            ),
          );
  }
}
