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/pages/spaces_management/model/product_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/selected_product_model.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/hoverable_button.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/constants/space_icon_const.dart'; class CreateSpaceDialog extends StatefulWidget { final Function(String, String, List selectedProducts) onCreateSpace; final List? products; final String? name; final String? icon; final bool isEdit; final List selectedProducts; const CreateSpaceDialog( {super.key, required this.onCreateSpace, this.products, this.name, this.icon, this.isEdit = false, this.selectedProducts = const []}); @override CreateSpaceDialogState createState() => CreateSpaceDialogState(); } class CreateSpaceDialogState extends State { String selectedIcon = Assets.location; String enteredName = ''; List selectedProducts = []; late TextEditingController nameController; @override void initState() { super.initState(); selectedIcon = widget.icon ?? Assets.location; nameController = TextEditingController(text: widget.name ?? ''); selectedProducts = widget.selectedProducts.isNotEmpty ? widget.selectedProducts : []; } @override @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of(context).size.width; final screenHeight = MediaQuery.of(context).size.height; return AlertDialog( title: widget.isEdit ? const Text('Edit Space') : const Text('Create New Space'), backgroundColor: ColorsManager.whiteColors, content: SizedBox( width: screenWidth * 0.5, // Limit dialog width child: SingleChildScrollView( // Scrollable content to prevent overflow child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Stack( alignment: Alignment.center, children: [ Container( width: screenWidth * 0.1, // Adjusted width height: screenWidth * 0.1, // Adjusted height decoration: const BoxDecoration( color: ColorsManager.boxColor, shape: BoxShape.circle, ), ), SvgPicture.asset( selectedIcon, width: screenWidth * 0.04, height: screenWidth * 0.04, ), Positioned( top: 6, right: 6, child: InkWell( onTap: _showIconSelectionDialog, child: Container( width: screenWidth * 0.020, height: screenWidth * 0.020, decoration: const BoxDecoration( color: Colors.white, shape: BoxShape.circle, ), child: SvgPicture.asset( Assets.iconEdit, width: screenWidth * 0.06, height: screenWidth * 0.06, ), ), ), ), ], ), const SizedBox(width: 16), Expanded( // Ensure the text field expands responsively child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextField( controller: nameController, onChanged: (value) { enteredName = value; }, style: const TextStyle(color: Colors.black), decoration: InputDecoration( hintText: 'Please enter the name', hintStyle: const TextStyle( fontSize: 14, color: ColorsManager.lightGrayColor, fontWeight: FontWeight.w400, ), filled: true, fillColor: ColorsManager.boxColor, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( color: ColorsManager.boxColor, width: 1.5, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( color: ColorsManager.boxColor, width: 1.5, ), ), ), ), const SizedBox(height: 16), if (selectedProducts.isNotEmpty) _buildSelectedProductsButtons(widget.products ?? []) else DefaultButton( onPressed: () { showDialog( context: context, builder: (context) => AddDeviceWidget( products: widget.products, onProductsSelected: (selectedProductsMap) { setState(() { selectedProducts = selectedProductsMap; }); }, ), ); }, backgroundColor: ColorsManager.textFieldGreyColor, foregroundColor: Colors.black, borderColor: ColorsManager.neutralGray, borderRadius: 16.0, padding: 10.0, // Reduced padding for smaller size child: Align( alignment: Alignment.centerLeft, child: Row( mainAxisSize: MainAxisSize.min, children: [ Padding( padding: const EdgeInsets.only(left: 6.0), child: SvgPicture.asset( Assets.addIcon, width: screenWidth * 0.015, // Adjust icon size height: screenWidth * 0.015, ), ), const SizedBox(width: 3), Flexible( child: Text( 'Add devices / Assign a space model', overflow: TextOverflow.ellipsis, // Prevent overflow style: Theme.of(context).textTheme.bodyMedium, ), ), ], ), )), ], ), ), ], ), ], ), ), ), actions: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: CancelButton( label: 'Cancel', onPressed: () => Navigator.of(context).pop(), ), ), const SizedBox(width: 10), Expanded( child: DefaultButton( onPressed: () { String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? ''); if (newName.isNotEmpty) { widget.onCreateSpace(newName, selectedIcon, selectedProducts); Navigator.of(context).pop(); } }, backgroundColor: ColorsManager.secondaryColor, foregroundColor: ColorsManager.whiteColors, child: const Text('OK'), ), ), ], ), ], ); } void _showIconSelectionDialog() { final screenWidth = MediaQuery.of(context).size.width; showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text('Select Icon'), backgroundColor: Colors.white, content: Container( width: screenWidth * 0.5, padding: const EdgeInsets.all(18), decoration: BoxDecoration( color: ColorsManager.boxColor, borderRadius: BorderRadius.circular(12), ), child: GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 7, crossAxisSpacing: 10, mainAxisSpacing: 22, ), itemCount: spaceIconList.length, itemBuilder: (BuildContext context, int index) { return GestureDetector( onTap: () { setState(() { selectedIcon = spaceIconList[index]; }); Navigator.of(context).pop(); }, child: SvgPicture.asset( spaceIconList[index], width: screenWidth * 0.06, height: screenWidth * 0.06, ), ); }, ), ), ); }, ); } Widget _buildSelectedProductsButtons(List products) { final screenWidth = MediaQuery.of(context).size.width; return Container( width: screenWidth * 0.6, padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: ColorsManager.textFieldGreyColor, borderRadius: BorderRadius.circular(12), border: Border.all( color: ColorsManager.neutralGray, width: 2, // Set the border width ), ), child: Wrap( spacing: 8, runSpacing: 8, children: [ for (var product in selectedProducts) HoverableButton( iconPath: _mapIconToProduct(product.productId, products), text: 'x${product.count}', onTap: () { setState(() { selectedProducts.remove(product); }); // Handle button tap }, ), // Add Button GestureDetector( onTap: () { showDialog( context: context, builder: (context) => AddDeviceWidget( products: widget.products, initialSelectedProducts: selectedProducts, onProductsSelected: (selectedProductsMap) { setState(() { selectedProducts = selectedProductsMap; }); }, ), ); }, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( color: ColorsManager.whiteColors, borderRadius: BorderRadius.circular(16), ), child: const Icon( Icons.add, color: ColorsManager.spaceColor, size: 24, ), ), ), ], ), ); } String _mapIconToProduct(String uuid, List products) { // Find the product with the matching UUID final product = products.firstWhere( (product) => product.uuid == uuid, orElse: () => ProductModel( uuid: '', catName: '', prodId: '', prodType: '', name: '', icon: Assets.presenceSensor, ), ); return product.icon ?? Assets.presenceSensor; } }