import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BrightnessButton extends StatefulWidget {
  static String routeName = "brightnessPage";

  @override
  State<BrightnessButton> createState() => _BrightnessButtonState();
}

class _BrightnessButtonState extends State<BrightnessButton> {
  double _sliderValue = 0.5; // Initialize the slider value
  final ValueNotifier<int> _imageIndexNotifier = ValueNotifier<int>(10 );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent, // Make app bar transparent
        elevation: 0, // Remove the elevation (green bar)
        flexibleSpace: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Edit Brightness",
              style: TextStyle(
                fontFamily: 'Product Sans',
                fontWeight: FontWeight.bold,
                fontSize: 51.0,
                color: Color(0xFF323438),
              ),
            ),
            Text(
              "Set how bright your Agipads lights are.",
              style: TextStyle(
                fontFamily: 'Product Sans',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ValueListenableBuilder<int>(
              valueListenable: _imageIndexNotifier,
              builder: (context, imageIndex, child) {
                return Image.asset(
                  'assets/images/sun$imageIndex.png',
                  width: 160, // Adjust the width to make the image bigger
                  height: 160, // Adjust the height to make the image bigger
                );
              },
            ),
            SizedBox(height: 16.0),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0), // Add padding to the row
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildSliderDot(10),
                  _buildSliderDot(25),
                  _buildSliderDot(50),
                  _buildSliderDot(75),
                  _buildSliderDot(100),
                ],
              ),
            ),
            SizedBox(height: 16.0),
            GestureDetector(
              onTap: () {
                // Allow tapping on the slider
              },
              child: SizedBox(
                width: MediaQuery.of(context).size.width - 32.0, // Adjust the width to match the screen width minus padding
                child: CupertinoSlider(
                  value: _sliderValue,
                  onChanged: (value) {
                    setState(() {
                      _sliderValue = value;
                      _updateImageIndex(value);
                    });
                  },
                  min: 0.0,
                  max: 1.0,
                  activeColor: Colors.yellow,
                  thumbColor: Colors.white,
                ),
              ),
            ),
            SizedBox(height: 16.0),
            _buildPercentageBox(),
            SizedBox(height: 16.0),
            _buildActionButtons(),
          ],
        ),
      ),
    );
  }

  Widget _buildSliderDot(int percentage) {
    return GestureDetector(
      onTap: () {
        final value = percentage / 100;
        setState(() {
          _sliderValue = value;
          _updateImageIndex(value);
        });
      },
      child: Container(
        width: 8.0,
        height: 8.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
      ),
    );
  }

  Widget _buildPercentageBox() {
    return Container(
      width: 60.0,
      height: 24.0,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(4.0),
      ),
      child: Center(
        child: Text(
          '${(_sliderValue * 100).toStringAsFixed(0)}%',
          style: TextStyle(
            color: Colors.black,
            fontSize: 14.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Widget _buildActionButtons() {
    return Column(
      children: [
        SizedBox(
          width: 182,
          height: 48,
          child: ElevatedButton(
            onPressed: () {
              // Implement the save action here
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Color(0xFF128566),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0),
              ),
            ),
            child: Text(
              'Save',
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
        SizedBox(height: 8.0), // Adjust the distance between the buttons
        SizedBox(
          width: 182,
          height: 48,
          child: TextButton(
            onPressed: () {
              // Implement the cancel action here
            },
            style: TextButton.styleFrom(
              backgroundColor: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0),
                side: BorderSide(color: Colors.grey, width: 1.0), // Add a thin gray border
              ),
            ),
            child: Text(
              'Cancel',
              style: TextStyle(
                color: Colors.black,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ],
    );
  }

  void _updateImageIndex(double sliderValue) {
    final images = [10, 25, 50, 75, 100];
    final index = (sliderValue * (images.length - 1)).round();
    _imageIndexNotifier.value = images[index];
  }
}
