ModernMemoires/lib/utils/widgets/QuestionSliderWidget.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:moody/utils/logic/QuestionGenerator.dart';

class QuestionSliderWidget extends StatefulWidget {
  final DateTime date;
  final String questionText;
  final double initialSliderValue;
  final bool isSliderEnabled;
  final ValueChanged<SliderChangeData> onSliderChanged;
  final ValueChanged<double> onSliderPositionChanged;
  final Color sliderColor; // parameter for the color

  QuestionSliderWidget({
    Key? key,
    required this.date,
    required this.questionText,
    required this.initialSliderValue,
    required this.isSliderEnabled,
    required this.onSliderChanged,
    required this.onSliderPositionChanged,
    required this.sliderColor, // Initialize the color
  }) : super(key: key);

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

class _QuestionSliderWidgetState extends State<QuestionSliderWidget> {
  bool _showDragText = true;
  SliderChangeData _sliderData = SliderChangeData(0, 0);
  QuestionGenerator generator = QuestionGenerator();

  @override
  void initState() {
    super.initState();
    _sliderData.value = widget.initialSliderValue;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 150, 20, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // Date
          Padding(
            padding: const EdgeInsets.fromLTRB(30, 0, 0, 30),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  DateFormat('dd MM yyyy').format(widget.date),
                  style: TextStyle(fontSize: 18),
                ),
                SizedBox(height: 10),
                Text(
                  generator.getQuestionByDate(widget.date),
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
          // Slider and label
          Stack(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(15, 0, 0, 15),
                child: SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    disabledThumbColor: Colors.transparent,
                    activeTrackColor: widget.sliderColor,
                    trackShape: RectangularSliderTrackShape(),
                    inactiveTickMarkColor: Colors.red,
                    inactiveTrackColor: Colors.transparent,
                    valueIndicatorColor: Colors.purple,
                    overlayColor: Colors.transparent,
                    activeTickMarkColor: Colors.red,
                    showValueIndicator: ShowValueIndicator.always,
                    trackHeight: 2,
                    thumbColor: Colors.transparent,
                    thumbShape: RoundSliderThumbShape(
                        enabledThumbRadius: 10.0,
                        elevation: 0,
                        disabledThumbRadius: 0),
                    rangeThumbShape: RoundRangeSliderThumbShape(
                      disabledThumbRadius: 0,
                      enabledThumbRadius: 0,
                      elevation: 0,
                    ),
                  ),
                  child: Slider(
                    min: 0.0,
                    max: 100.0,
                    value: _sliderData.value,
                    onChanged: widget.isSliderEnabled
                        ? (value) {
                            setState(() {
                              _sliderData.position =
                                  _calculateSliderPosition(context, value);
                              _sliderData.value = value;
                              _showDragText = false;
                            });
                            widget.onSliderChanged(SliderChangeData(
                                _sliderData.value, _sliderData.position));
                          }
                        : null,
                  ),
                ),
              ),
              Positioned(
                left: _calculateSliderPosition(context, _sliderData.value),
                child: IgnorePointer(
                  child: _showDragText
                      ? Text(
                          "Drag Me -->",
                          style: TextStyle(
                              fontSize: 16, color: widget.sliderColor),
                        )
                      : Text(
                          "${_sliderData.value.toStringAsFixed(0)}%",
                          style: TextStyle(
                              fontSize: 20, color: widget.sliderColor),
                        ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  double _calculateSliderPosition(BuildContext context, double value) {
    double sliderWidth =
        MediaQuery.of(context).size.width - 40; // Width minus padding
    double thumbWidth = 48; // Estimate of the thumb width
    return (sliderWidth - thumbWidth) * value / 100.0 + thumbWidth / 2;
  }
}

class SliderChangeData {
  double value;
  double position; // Additional data you might want to include

  SliderChangeData(this.value, this.position);
}