import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class CreateSpaceDialog extends StatefulWidget {
  // Add the onCreateSpace parameter as a required field
  final Function(String, String) onCreateSpace;

  const CreateSpaceDialog({super.key, required this.onCreateSpace});

  @override
  CreateSpaceDialogState createState() => CreateSpaceDialogState();
}

class CreateSpaceDialogState extends State<CreateSpaceDialog> {
  String selectedIcon = Assets.location; // Initially selected icon
  String enteredName = ''; // Store entered space name

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Create New Space'),
      backgroundColor: ColorsManager.whiteColors,
      content: SizedBox(
        width: 600, // Set width for the dialog
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      width: 100,
                      height: 100,
                      decoration: const BoxDecoration(
                        color: Color(0xFFF5F6F7),
                        shape: BoxShape.circle,
                      ),
                    ),
                    SvgPicture.asset(
                      selectedIcon, // Display the selected icon here
                      width: 60,
                      height: 60,
                    ),
                    Positioned(
                      top: 2,
                      left: 2,
                      child: InkWell(
                        onTap: () =>
                            _showIconSelectionDialog(), // Open the icon selection dialog
                        child: Container(
                          width: 20,
                          height: 20,
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          ),
                          child: SvgPicture.asset(Assets.iconEdit,
                              width: 10, height: 10),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: TextField(
                    onChanged: (value) {
                      enteredName = value; // Capture entered name
                    },
                    style: TextStyle(
                      color: ColorsManager.blackColor,
                    ),
                    decoration: InputDecoration(
                      hintText: 'Please enter the name',
                      filled: true,
                      fillColor: const Color(0xFFF5F6F7),
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(color: Color(0xFFF5F6F7)),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFF5F6F7),
                            width: 1), // Default border
                        borderRadius: BorderRadius.circular(10),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide:
                            BorderSide(color: Color(0xFFF5F6F7), width: 1),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: CancelButton(
                label: 'Cancel',
                onPressed: () => Navigator.of(context).pop(),
              ),
            ),
            const SizedBox(width: 10),
            Expanded(
              child: DefaultButton(
                onPressed: () {
                  if (enteredName.isNotEmpty) {
                    widget.onCreateSpace(enteredName, selectedIcon); // Pass name and icon back
                    Navigator.of(context).pop(); // Close dialog
                  }
                },
                child: const Text('OK'),
                backgroundColor: const Color(0xFF023DFE),
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ],
    );
  }

  // Icon selection dialog
  void _showIconSelectionDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Select Icon'),
          backgroundColor: Colors.white,
          content: Container(
            width: 500, // Width of the icon selection dialog
            height: 200, // Height of the dialog
            padding: const EdgeInsets.all(18),
            decoration: BoxDecoration(
              color: const Color(0xFFF5F6F7),
              borderRadius: BorderRadius.circular(12),
            ),
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7, // Number of icons per row
                crossAxisSpacing: 10, // Space between icons horizontally
                mainAxisSpacing: 22, // Space between icons vertically
              ),
              itemCount: _iconList.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedIcon =
                          _iconList[index]; // Update the selected icon
                    });
                    Navigator.of(context)
                        .pop(); // Close the icon selection dialog
                  },
                  child: SvgPicture.asset(
                    _iconList[index],
                    width: 50, // Adjust size as needed
                    height: 50,
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }

  // Icon list containing SVG asset paths
  final List<String> _iconList = [
    Assets.location,
    Assets.villa,
    Assets.gym,
    Assets.sauna,
    Assets.bbq,
    Assets.building,
    Assets.desk,
    Assets.door,
    Assets.parking,
    Assets.pool,
    Assets.stair,
    Assets.steamRoom,
    Assets.street,
    Assets.unit,
  ];
}