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/model/space_model.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/icon_selection_dialog.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; final SpaceModel? parentSpace; final SpaceModel? editSpace; const CreateSpaceDialog( {super.key, this.parentSpace, required this.onCreateSpace, this.products, this.name, this.icon, this.isEdit = false, this.editSpace, this.selectedProducts = const []}); @override CreateSpaceDialogState createState() => CreateSpaceDialogState(); } class CreateSpaceDialogState extends State { String selectedIcon = Assets.location; String enteredName = ''; List selectedProducts = []; late TextEditingController nameController; bool isOkButtonEnabled = false; bool isNameFieldInvalid = false; bool isNameFieldExist = false; @override void initState() { super.initState(); selectedIcon = widget.icon ?? Assets.location; nameController = TextEditingController(text: widget.name ?? ''); selectedProducts = widget.selectedProducts.isNotEmpty ? widget.selectedProducts : []; isOkButtonEnabled = enteredName.isNotEmpty || nameController.text.isNotEmpty; } @override @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of(context).size.width; 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.trim(); setState(() { isNameFieldExist = false; isOkButtonEnabled = false; isNameFieldInvalid = value.isEmpty; if (!isNameFieldInvalid) { if ((widget.parentSpace?.children.any( (child) => child.name == value) ?? false) || (widget.parentSpace?.name == value) || (widget.editSpace?.children.any( (child) => child.name == value) ?? false)) { isNameFieldExist = true; isOkButtonEnabled = false; } else { isNameFieldExist = false; isOkButtonEnabled = true; } } }); }, 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: BorderSide( color: isNameFieldInvalid || isNameFieldExist ? ColorsManager.red : ColorsManager.boxColor, width: 1.5, ), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( color: ColorsManager.boxColor, width: 1.5, ), ), ), ), if (isNameFieldInvalid) Padding( padding: const EdgeInsets.only(top: 8.0), child: Text( '*Space name should not be empty.', style: Theme.of(context) .textTheme .bodySmall ?.copyWith(color: ColorsManager.red), ), ), if (isNameFieldExist) Padding( padding: const EdgeInsets.only(top: 8.0), child: Text( '*Name already exist', style: Theme.of(context) .textTheme .bodySmall ?.copyWith(color: ColorsManager.red), ), ), 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: () { if (nameController.text.isEmpty) { setState(() { isNameFieldInvalid = true; }); return; } else { String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? ''); if (newName.isNotEmpty) { widget.onCreateSpace( newName, selectedIcon, selectedProducts); Navigator.of(context).pop(); } } }, borderRadius: 10, backgroundColor: isOkButtonEnabled ? ColorsManager.secondaryColor : ColorsManager.grayColor, foregroundColor: ColorsManager.whiteColors, child: const Text('OK'), ), ), ], ), ], ); } void _showIconSelectionDialog() { showDialog( context: context, builder: (BuildContext context) { return IconSelectionDialog( spaceIconList: spaceIconList, onIconSelected: (String selectedIcon) { setState(() { this.selectedIcon = selectedIcon; }); }, ); }, ); } 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, ), ), child: Wrap( spacing: 8, runSpacing: 8, children: [ for (var i = 0; i < selectedProducts.length; i++) ...[ HoverableButton( iconPath: _mapIconToProduct(selectedProducts[i].productId, products), text: 'x${selectedProducts[i].count}', onTap: () { setState(() { selectedProducts.remove(selectedProducts[i]); }); // Handle button tap }, ), if (i < selectedProducts.length - 1) const SizedBox( width: 2), // Add space except after the last button ], const SizedBox(width: 2), 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; } }