import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/device_icon_type_helper.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/web_layout/default_container.dart'; class DeviceSettingsPanel extends StatelessWidget { final VoidCallback? onClose; final AllDevicesModel device; const DeviceSettingsPanel({super.key, this.onClose, required this.device}); @override Widget build(BuildContext context) { final sectionTitle = context.theme.textTheme.titleMedium!.copyWith( fontWeight: FontWeight.bold, color: ColorsManager.grayColor, ); Widget infoRow( {required String label, required String value, Widget? trailing, required Color? valueColor}) { return Padding( padding: const EdgeInsets.symmetric(vertical: 6.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( label, style: context.theme.textTheme.bodyMedium!.copyWith( fontSize: 14, color: ColorsManager.grayColor, ), ), Expanded( child: Text( value, textAlign: TextAlign.end, style: context.theme.textTheme.bodyMedium! .copyWith(fontSize: 14, color: valueColor), overflow: TextOverflow.ellipsis, ), ), const SizedBox(width: 8), trailing ?? const SizedBox.shrink(), ], ), ); } return BlocProvider( create: (context) => SettingBlocBloc( deviceId: device.uuid ?? '', ) ..add(DeviceSettingInitialInfo()) ..add(FetchRoomsEvent( communityUuid: device.community!.uuid!, spaceUuid: device.spaces!.first.uuid!, )), child: BlocBuilder( builder: (context, state) { final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(device.productType); final _bloc = BlocProvider.of(context); DeviceInfoModel deviceInfo = DeviceInfoModel.empty(); List subSpaces = []; if (state is UpdateSettingState) { deviceInfo = state.deviceInfo!; subSpaces = state.roomsList; } return Stack( children: [ Container( width: MediaQuery.of(context).size.width * 0.3, color: ColorsManager.grey25, padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24), child: ListView( children: [ // Header Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: SvgPicture.asset(Assets.closeSettingsIcon), onPressed: onClose ?? () => Navigator.of(context).pop(), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Device Settings', style: context.theme.textTheme.titleLarge!.copyWith( fontWeight: FontWeight.bold, color: ColorsManager.primaryColor, ), ), ], ), const SizedBox(height: 24), // Device Name + Icon DefaultContainer( child: Row( children: [ CircleAvatar( radius: 40, backgroundColor: const Color.fromARGB(177, 213, 213, 213), child: CircleAvatar( backgroundColor: ColorsManager.whiteColors, radius: 36, child: SvgPicture.asset( iconPath, fit: BoxFit.cover, ), ), ), const SizedBox(width: 12), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Device Name:', style: context.textTheme.bodyMedium!.copyWith( color: ColorsManager.grayColor, ), ), TextFormField( maxLength: 30, style: const TextStyle( color: ColorsManager.blackColor, ), textAlign: TextAlign.start, focusNode: _bloc.focusNode, controller: _bloc.nameController, enabled: _bloc.editName, onFieldSubmitted: (value) { _bloc.add( const ChangeNameEvent(value: false)); }, decoration: const InputDecoration( border: InputBorder.none, fillColor: Colors.white10, counterText: '', ), ), ], ), ), const SizedBox(width: 8), Visibility( visible: _bloc.editName != true, replacement: const SizedBox(), child: GestureDetector( onTap: () { _bloc.add(const ChangeNameEvent(value: true)); }, child: SvgPicture.asset( Assets.editNameIconSettings, color: ColorsManager.grayColor, height: 20, width: 20, ), ), ) ], ), ), const SizedBox(height: 32), // Device Management Text('Device Management', style: sectionTitle), DefaultContainer( padding: EdgeInsets.zero, child: Column( children: [ const SizedBox(height: 5), Padding( padding: const EdgeInsets.all(10.0), child: InkWell( onTap: () { showSubSpaceDialog( context, communityUuid: device.community!.uuid!, spaceUuid: device.spaces!.first.uuid!, subSpaces: subSpaces, selected: device.subspace!.uuid, ); }, child: infoRow( label: 'Sub-Space:', value: deviceInfo.subspace.subspaceName, valueColor: ColorsManager.textGray, trailing: const Icon( Icons.arrow_forward_ios, size: 16, color: ColorsManager.greyColor, ), ), ), ), const Divider(color: ColorsManager.dividerColor), Padding( padding: const EdgeInsets.all(10.0), child: infoRow( label: 'Virtual Address:', value: deviceInfo.productUuid, valueColor: ColorsManager.blackColor, trailing: InkWell( onTap: () { Clipboard.setData( ClipboardData( text: device.productUuid ?? ''), ); ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text( 'Virtual Address copied to clipboard'), ), ); }, child: const Icon( Icons.copy, size: 16, color: ColorsManager.greyColor, ), ), ), ), const Divider(color: ColorsManager.dividerColor), Padding( padding: const EdgeInsets.all(10.0), child: infoRow( label: 'MAC Address:', valueColor: ColorsManager.blackColor, value: deviceInfo.macAddress, ), ), const SizedBox(height: 5), ], ), ), const SizedBox(height: 32), // Remove Device Button SizedBox( width: double.infinity, child: InkWell( onTap: () { showDialog( context: context, builder: (context) { return AlertDialog( title: Text( 'Remove Device', style: context.textTheme.bodyMedium!.copyWith( fontWeight: FontWeight.w700, color: ColorsManager.red, ), ), content: Text( 'Are you sure you want to remove this device?', style: context.textTheme.bodyMedium!.copyWith( color: ColorsManager.grayColor, ), ), actions: [ TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text( 'Cancel', style: context.textTheme.bodyMedium! .copyWith( color: ColorsManager.grayColor, ), ), ), TextButton( onPressed: () { _bloc.add(DeleteDeviceEvent()); Navigator.of(context).pop(); }, child: Text( 'Remove', style: context.textTheme.bodyMedium! .copyWith( color: ColorsManager.red, ), ), ), ], ); }, ); }, child: DefaultContainer( padding: const EdgeInsets.all(25), child: Center( child: Text( 'Remove Device', style: context.textTheme.bodyMedium!.copyWith( fontSize: 14, color: ColorsManager.red, fontWeight: FontWeight.w700), ), ), ), ), ), ], ), ), if (state is SettingLoadingState) Positioned.fill( child: Container( color: Colors.black.withOpacity(0.1), child: const Center( child: CircularProgressIndicator( color: ColorsManager.primaryColor, ), ), ), ), ], ); }, ), ); } }