import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  double _sliderValue = 0.0;
  bool _sliderChanged = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          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 are you 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: Text("Why?"),
                    ),
                  ],
                ),
              ),
              // Skip/Save button
              Positioned(
                bottom: 20,
                right: 20,
                child: TextButton(
                  onPressed: () {},
                  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;
}