import 'package:flutter/material.dart';

class ColorPicker extends StatefulWidget {
  static String routeName = "colorPicker";
  Color onColorSelected = Colors.black;
  ColorPicker({this.onColorSelected = Colors.black});

  @override
  State<ColorPicker> createState() => _ColorPickerState();
}

class _ColorPickerState extends State<ColorPicker> {
  String? selectedColorBox;
  double selectedImageWidth = 100.0; // Set the width of the selected image
  double selectedImageHeight = 100.0; // Set the height of the selected image

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.fromLTRB(16.0, 80.0, 16.0, 16.0),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Edit Color',
                    style: TextStyle(
                      fontFamily: 'Product Sans',
                      fontWeight: FontWeight.bold,
                      fontSize: 36.0,
                      color: Colors.black,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  Icon(
                    Icons.refresh,
                    color: Colors.black,
                  ),
                ],
              ),
            ),
            SizedBox(height: 20.0),
            Text(
              'Tap on a color below to update the look of the LED lights.',
              style: TextStyle(
                fontFamily: 'Product Sans',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
                color: Colors.black,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20.0),

            // Add the grid of colored boxes
            Expanded(
              child: GridView.count(
                crossAxisCount: 3, // 3 columns
                children: [
                  buildColorBox('assets/images/yellow_box.png', 'yellow'),
                  buildColorBox('assets/images/green_box.png', 'green'),
                  buildColorBox('assets/images/red_box.png', 'red'),
                  buildColorBox('assets/images/blue_box.png', 'blue'),
                  buildColorBox('assets/images/white_box.png', 'white'),
                  buildColorBox('assets/images/orange_box.png', 'orange'),
                  buildColorBox('assets/images/violet_box.png', 'violet'),
                  buildColorBox('assets/images/cyan_box.png', 'cyan'),
                  buildColorBox('assets/images/pink_box.png', 'pink'),
                ],
              ),
            ),

            SizedBox(height: 16.0),

            // Save and Cancel buttons
            Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      // Implement the "Save" action here
                    },
                    style: ElevatedButton.styleFrom(
                      minimumSize: Size(182, 48),
                      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),
                  TextButton(
                    onPressed: () {
                      // Implement the "Cancel" action here
                    },
                    style: TextButton.styleFrom(
                      minimumSize: Size(182, 48),
                      backgroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30.0),
                        side: BorderSide(color: Colors.grey, width: 1.0),
                      ),
                    ),
                    child: Text(
                      'Cancel',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildColorBox(String imagePath, String colorName) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedColorBox = colorName;
        });
      },
      child: Stack(
        children: [
          Image.asset(imagePath),
          if (selectedColorBox == colorName)
            Positioned(
              top: 0.0, // Adjust top position
              left: 0.0, // Adjust left position
              child: Image.asset(
                'assets/images/selected_color.png',
                width: selectedImageWidth,
                height: selectedImageHeight,
              ),
            ),
        ],
      ),
    );
  }
}
