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

class SegmentedEnumInputContainer<T> extends StatefulWidget {
  final String label;
  final T selected;
  final List<T> values;
  final Map<T, Map<String, dynamic>> inputValues; // {'label': String, 'icon': IconData}
  final ValueChanged<T> onChanged;
  final double borderRadius;
  final Color selectedColor;
  final Color unselectedColor;
  final Color textColor;

  const SegmentedEnumInputContainer({
    Key? key,
    required this.label,
    required this.selected,
    required this.values,
    required this.inputValues,
    required this.onChanged,
    this.borderRadius = 12,
    this.selectedColor = kPrimaryColor,
    this.unselectedColor = kSecond,
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  _SegmentedEnumInputContainerState<T> createState() =>
      _SegmentedEnumInputContainerState<T>();
}

class _SegmentedEnumInputContainerState<T>
    extends State<SegmentedEnumInputContainer<T>> {
  late T selectedValue;

  @override
  void initState() {
    super.initState();
    selectedValue = widget.selected;
  }

  @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(
          width: 275,
          height: 120,
          padding: const EdgeInsets.all(4),
          /*decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(widget.borderRadius),
            border: Border.all(color: Colors.grey.shade400, width: 1.2),
          ),*/
          child: Row(
            children: widget.values.map((v) {
              bool isSelected = v == selectedValue;
              final data = widget.inputValues[v]!;
              return Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedValue = v;
                    });
                    widget.onChanged(v);
                  },
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 250),
                    margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    decoration: BoxDecoration(
                      color: isSelected ? widget.selectedColor : widget.unselectedColor,
                      borderRadius: BorderRadius.circular(widget.borderRadius),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(data['icon'], color: widget.textColor),
                        const SizedBox(width: 4),
                        Text(
                          data['label'],
                          style: TextStyle(
                            color: widget.textColor,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    );
  }
}