import 'package:flutter/material.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';
import 'package:manager_app/constants.dart';

class MultiSelectDropdownLanguageContainer extends StatefulWidget {
  final Color color;
  final String label;
  final String labelHint;
  final List<String> values;
  final List<String> initialValue;
  final bool isMultiple;
  final bool isAtLeastOne;
  final double fontSize;
  final ValueChanged<List<String>> onChanged;

  const MultiSelectDropdownLanguageContainer({
    Key? key,
    this.color = kSecond,
    required this.label,
    this.labelHint = "Veuillez sélectionner une langue",
    required this.values,
    required this.initialValue,
    required this.isMultiple,
    this.isAtLeastOne = false,
    this.fontSize = 18,
    required this.onChanged,
  }) : super(key: key);

  @override
  State<MultiSelectDropdownLanguageContainer> createState() =>
      _MultiSelectDropdownLanguageContainerState();
}

class _MultiSelectDropdownLanguageContainerState
    extends State<MultiSelectDropdownLanguageContainer> {
  late List<String> _selectedValues;

  @override
  void initState() {
    super.initState();
    _selectedValues = List.from(widget.initialValue);
  }

  String _buildSummary(List<String> selected) {
    if (selected.isEmpty) return widget.labelHint;
    if (selected.length <= 5) return selected.join(", ");
    return "${selected.length} sélectionnés";
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Align(
          alignment: AlignmentDirectional.centerStart,
          child: Text(
            widget.label,
            style: const TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 16,
            ),
          ),
        ),
        const SizedBox(height: 8, width: 10),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 35),
          /*decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.grey.shade400, width: 1.2),
            color: Colors.white,
          ),*/
          child: MultiSelectDialogField<String>(
            items: widget.values.map((e) => MultiSelectItem(e, e)).toList(),
            initialValue: _selectedValues,
            listType: MultiSelectListType.LIST,
            searchable: true,
            searchIcon: Icon(Icons.search, color: kPrimaryColor),
            selectedColor: kPrimaryColor,
            checkColor: Colors.white,
            buttonIcon: Icon(Icons.arrow_drop_down, color: kPrimaryColor),
            buttonText: Text(
              _buildSummary(_selectedValues),
              style: TextStyle(color: Colors.black87, fontSize: 14),
            ),
            chipDisplay: MultiSelectChipDisplay.none(),
            dialogHeight: MediaQuery.of(context).size.height * 0.4,
            dialogWidth: MediaQuery.of(context).size.width * 0.6,
            onConfirm: (selected) {
              if (widget.isAtLeastOne && selected.isEmpty) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text("Au moins une valeur doit être sélectionnée"),
                  ),
                );
              } else {
                setState(() {
                  _selectedValues = selected.cast<String>();
                });
                widget.onChanged(_selectedValues);
              }
            },
          ),
        ),
      ],
    );
  }
}