import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:moody/views/write_page/widget/why_widget.dart';

class WritePage extends StatefulWidget {
  final double moodPercentage;

  const WritePage({Key? key, required this.moodPercentage}) : super(key: key);
  @override
  _WritePageState createState() => _WritePageState();
}

class _WritePageState extends State<WritePage> {
  double _sliderValue = 0.0;
  bool _sliderChanged = true;
  @override
  void initState() {
    super.initState();
    _sliderValue = widget.moodPercentage; // Set the value here
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Stack(
              children: [
                // Background circle
                Positioned.fill(
                  child: CustomPaint(
                    painter: CirclePainter(_sliderValue),
                  ),
                ),
                // Main content
                Padding(
                  padding: const EdgeInsets.fromLTRB(25, 175, 25, 25),

                  // padding: const EdgeInsets.all(25.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      // Date
                      Text(
                        "${DateFormat('dd MM yyyy').format(DateTime.now())}",
                        style: TextStyle(fontSize: 18),
                      ),
                      SizedBox(height: 10),
                      // Text prompt
                      Text(
                        "how fullfilled do you feel today?",
                        style: TextStyle(
                            fontSize: 22, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 32), // 2 line padding
                      // Slider and label
                      Row(
                        children: [
                          Expanded(
                            child: SliderTheme(
                              data: SliderTheme.of(context).copyWith(
                                disabledThumbColor: Colors.amber,
                                activeTrackColor: Colors.black,
                                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: 0.0),
                                rangeThumbShape: RoundRangeSliderThumbShape(
                                    disabledThumbRadius: 0,
                                    enabledThumbRadius: 0,
                                    elevation: 22),
                              ),
                              child: Slider(
                                min: 0.0,
                                max: 100.0,
                                value: _sliderValue,
                                onChanged: (value) {
                                  setState(() {
                                    _sliderValue = value;
                                    _sliderChanged = true;
                                  });
                                },
                              ),
                            ),
                          ),
                          // Arrow icon
                          if (!_sliderChanged) Icon(Icons.arrow_forward),
                        ],
                      ),
                      // Drag me label
                      if (!_sliderChanged)
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: Text("Drag me"),
                          ),
                        ),
                      // Slider percentage
                      if (_sliderValue > 0)
                        Text(
                          "${_sliderValue.toStringAsFixed(0)}%",
                          style: TextStyle(fontSize: 18),
                        ),
                      // Why? button
                      TextButton(
                        onPressed: () {
                          context.go('/write', extra: _sliderValue);

                          // Implement your why? functionality here
                        },
                        child: WhyWidget(),
                      ),
                    ],
                  ),
                ),
                // Skip/Save button
                Positioned(
                  bottom: 20,
                  right: 20,
                  child: TextButton(
                    onPressed: () {
                      context.go("/home");
                    },
                    child: Text(_sliderChanged ? "Save" : "Skip"),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final double value;

  CirclePainter(this.value);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.greenAccent.withOpacity(0.5)
      ..style = PaintingStyle.fill;

    double radius = value * size.width / 100 * 1.5;
    canvas.drawCircle(Offset(size.width / 6, size.height / 4), radius, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}