import 'package:flutter/material.dart';

class ColorThemePickerWidget extends StatefulWidget {
  final Color? initialLayoutColor;
  final Color? initialBodyColor;

  final Function(Color layout, Color secondaryColor, Color tertiaryColor)
  onLayoutColorSelected;
  final Function(Color) onBodyColorSelected;

  const ColorThemePickerWidget({
    Key? key,
    required this.initialBodyColor,
    required this.initialLayoutColor,
    required this.onLayoutColorSelected,
    required this.onBodyColorSelected,
  }) : super(key: key);

  @override
  State<ColorThemePickerWidget> createState() => _ColorThemePickerWidgetState();
}

class _ColorThemePickerWidgetState extends State<ColorThemePickerWidget> {
  late Color selectedLayoutColor;
  Color? selectedSecondaryColor;
  Color? selectedTertiaryColor;
  late Color selectedBodyColor;

  // Layout colors
  final List<Color> layoutThemeColors = [
    Color(0xFF448AFF), // BlueAccent
    Color(0xFF027E87), // Blue Shade
    Color(0xFF12B24B), // Green
    Color(0xFFe30f01), // Emerald Green
    Color(0xFFf26157), // Emerald Green
    Color(0xFFFF9800), // Orange
    Color(0xFF3F51B5), // Orange 2
    Color(0xFF00695C), // Orange dark orange 3
    Color(0xFFD9067A), // rose
    Color(0xFFc94b92), // rose light
    Color(0xFF9C27B0), // Purple
    Color(0xFF9B59B6), // Purple 2
  ];

  final List<Color> layoutSecondaryColors = [
    Color(0xFF82B1FF), // Lighter BlueAccent
    Color(0xFF4DD0E1), // Lighter Teal
    Color(0xFF43A047), // Light Green
    Color(0xFFEF5350), // Lighter Red
    Color(0xFFFF8A65), // Coral Peach
    Color(0xFFFFB74D), // Amber Orange
    Color(0xFF7986CB), // Indigo Soft
    Color(0xFF4DB6AC), // Soft Teal
    Color(0xFFF06292), // Light Rose
    Color(0xFFF48FB1), // Light Pink
    Color(0xFFBA68C8), // Soft Purple
    Color(0xFFDDA0DD), // Plum
  ];

  final List<Color> layoutTertiaryColors = [
    Color(0xFFE5EFFF), // Very Light Blue
    Color(0xFFE6FDFF), // Very Light Teal
    Color(0xFFE8FDEF), // Mint Green
    Color(0xFFFFE7E6), // Light Coral/Red
    Color(0xFFFDE9E7), // Peach
    Color(0xFFFFF5E5), // Lightest Orange
    Color(0xFFECEEF8), // Very Light Rose
    Color(0xFFE5FFFC), // Pastel Pink
    Color(0xFFFEE6F3), // Light Lavender
    Color(0xFFF9EBF3), // Soft Purple Grey
    Color(0xFFF8EAFA), // Near-white Neutral
    Color(0xFFF4EDF7), // Near-white Neutral
  ];

  final List<Color> layoutTertiaryColors1 = [
    Color(0xFFE3F2FD), // Very Light Blue
    Color(0xFFE0F7FA), // Very Light Teal
    Color(0xFFC8E6C9), // Mint Green
    Color(0xFFFFCDD2), // Light Coral/Red
    Color(0xFFFFE0B2), // Peach
    Color(0xFFFFF3E0), // Lightest Orange
    Color(0xFFFFEBEE), // Very Light Rose
    Color(0xFFFCE4EC), // Pastel Pink
    Color(0xFFF3E5F5), // Light Lavender
    Color(0xFFF9EBF3), // Soft Purple Grey
    Color(0xFFF8F9FA), // Near-white Neutral
  ];

  // Body colors
  final List<Color> bodyThemeColors = [
    Color(0xFFD9EAFF),
    Color(0xFFB0BEC5), // Grey
    Color(0xFFE0E0E0), // Grey Shade 300
    Color(0xFFE1F5FE), // Blue Shade 50
    Color(0xFFF5F5F5), // Grey Shade 100
  ];

  @override
  void initState() {
    super.initState();

    selectedLayoutColor = widget.initialLayoutColor ?? Color(0xFFB0BEC5);
    selectedBodyColor = widget.initialBodyColor ?? Color(0xFFF44336);

    print("Colors - ${widget.initialLayoutColor} -${widget.initialBodyColor}");
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // Layout Color Picker
        GestureDetector(
          onTap:
              () => _showColorPickerDialog(
                title: "Choose Layout Color",
                colors: layoutThemeColors,
                onColorSelected: (color) {
                  setState(() {
                    selectedLayoutColor = color;
                    print("selectedLayoutColor - $selectedLayoutColor");
                    final SelectedIndex = layoutThemeColors.indexOf(color);
                    print("SelectedIndexLayout - $SelectedIndex");

                    if (SelectedIndex != -1) {
                      final secondaryColor =
                          layoutSecondaryColors[SelectedIndex];
                      final primaryColor = layoutTertiaryColors[SelectedIndex];

                      selectedSecondaryColor = secondaryColor;
                      selectedTertiaryColor = primaryColor;

                      print("selectedSecondaryColor - $selectedSecondaryColor");
                      print("selectedPrimaryColor - $selectedTertiaryColor");
                    }
                  });
                  widget.onLayoutColorSelected(
                    color,
                    selectedSecondaryColor!,
                    selectedTertiaryColor!,
                  );
                },
              ),
          child: _buildColorBox(
            selectedLayoutColor ?? Colors.grey.shade300,
            Icons.palette,
          ),
        ),
        // SizedBox(width: 15),
        // // Body Color Picker
        // GestureDetector(
        //   onTap: () => _showColorPickerDialog(
        //     title: "Choose Body Color",
        //     colors: bodyThemeColors,
        //     onColorSelected: (color) {
        //       setState(() {
        //         selectedBodyColor = color; // low opacity
        //       });
        //       widget.onBodyColorSelected(selectedBodyColor!);
        //     },
        //   ),
        //   child: _buildColorBox(
        //       selectedBodyColor ?? Colors.grey.shade300, Icons.opacity),
        // ),
      ],
    );
  }

  // Widget _buildColorBox(Color color, IconData icon) {
  //   return Container(
  //     width: 40,
  //     height: 40,
  //     decoration: BoxDecoration(
  //       color: color,
  //       border: Border.all(color: Colors.grey),
  //       borderRadius: BorderRadius.circular(5),
  //     ),
  //     child: Icon(icon, color: Colors.white, size: 20),
  //   );
  // }

  // void _showColorPickerDialog({
  //   required String title,
  //   required List<Color> colors,
  //   required Function(Color) onColorSelected,
  // }) {
  //   showDialog(
  //     context: context,
  //     builder:
  //         (context) => AlertDialog(
  //           title: Text(title),
  //           content: Wrap(
  //             spacing: 10,
  //             runSpacing: 10,
  //             children:
  //                 colors.map((color) {
  //                   return GestureDetector(
  //                     onTap: () {
  //                       onColorSelected(color);
  //                       Navigator.of(context).pop();
  //                     },
  //                     child: Container(
  //                       width: 30,
  //                       height: 30,
  //                       decoration: BoxDecoration(
  //                         color: color,
  //                         shape: BoxShape.circle,
  //                         border: Border.all(color: Colors.black26),
  //                       ),
  //                     ),
  //                   );
  //                 }).toList(),
  //           ),
  //         ),
  //   );
  // }

  Widget _buildColorBox(Color color, IconData icon) {
    return Container(
      width: 40,
      height: 40,
      decoration: BoxDecoration(
        color: color,
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Icon(icon, color: Colors.white, size: 20),
    );
  }

  void _showColorPickerDialog({
    required String title,
    required List<Color> colors,
    required Function(Color) onColorSelected,
  }) {
    // Dynamically split
    List<Color> firstRow = [];
    List<Color> secondRow = [];

    if (colors.length > 5) {
      int mid = (colors.length / 2).ceil();
      firstRow = colors.sublist(0, mid);
      secondRow = colors.sublist(mid);
    } else {
      firstRow = colors;
    }

    showDialog(
      context: context,
      builder:
          (context) => AlertDialog(
            title: Text(title),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:
                      firstRow
                          .map(
                            (color) =>
                                _buildColorCircle(color, onColorSelected),
                          )
                          .toList(),
                ),
                if (secondRow.isNotEmpty) SizedBox(height: 10),
                if (secondRow.isNotEmpty)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children:
                        secondRow
                            .map(
                              (color) =>
                                  _buildColorCircle(color, onColorSelected),
                            )
                            .toList(),
                  ),
              ],
            ),
          ),
    );
  }

  Widget _buildColorCircle(Color color, Function(Color) onSelect) {
    return GestureDetector(
      onTap: () => onSelect(color),
      child: Container(
        width: 30,
        height: 30,
        margin: EdgeInsets.symmetric(horizontal: 4),
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(color: Colors.black26),
        ),
      ),
    );
  }
}
