syncrow-web/lib/pages/device_managment/device_setting/device_settings_panel.dart

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/bloc/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/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({this.onClose, super.key, 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}) {
      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: ColorsManager.blackColor,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const SizedBox(width: 8),
            trailing ?? const SizedBox.shrink(),
          ],
        ),
      );
    }

    return BlocProvider(
        create: (context) => SettingBlocBloc(
              deviceId: device.uuid ?? '',
            )..add(DeviceSettingInitialInfo()),
        child: BlocBuilder<SettingBlocBloc, DeviceSettingsState>(
            builder: (context, state) {
          final iconPath =
              DeviceTypeHelper.getDeviceIconByTypeCode(device.productType);
          final _bloc = BlocProvider.of<SettingBlocBloc>(context);
          DeviceInfoModel deviceInfo = DeviceInfoModel.empty();
          if (state is UpdateSettingState) {
            deviceInfo = state.deviceInfo!;
          }
          return 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: TextFormField(
                          maxLength: 30,
                          style: const TextStyle(
                            color: ColorsManager.blackColor,
                          ),
                          textAlign: TextAlign.center,
                          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),
                      _bloc.editName == true
                          ? const SizedBox()
                          : 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: infoRow(
                          label: 'Sub-Space:',
                          value: device.subspace!.subspaceName,
                          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,
                          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:',
                            value: deviceInfo.macAddress),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 32),

                /// Remove Device Button
                SizedBox(
                  width: double.infinity,
                  child: InkWell(
                    onTap: () {
                      _bloc.add(DeleteDeviceEvent());
                    },
                    child: const DefaultContainer(
                      padding: EdgeInsets.all(25),
                      child: Center(
                        child: Text(
                          'Remove Device',
                          style: TextStyle(color: ColorsManager.red),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        }));
  }
}

class DeviceTypeHelper {
  static const Map<String, String> _iconMap = {
    'AC': Assets.ac,
    'GW': Assets.gateway,
    'CPS': Assets.sensors,
    'DL': Assets.doorLock,
    'WPS': Assets.sensors,
    '3G': Assets.gangSwitch,
    '2G': Assets.twoGang,
    '1G': Assets.oneGang,
    'CUR': Assets.curtain,
    'WH': Assets.waterHeater,
    'DS': Assets.doorSensor,
    '1GT': Assets.oneTouchSwitch,
    '2GT': Assets.twoTouchSwitch,
    '3GT': Assets.threeTouchSwitch,
    'GD': Assets.garageDoor,
    'WL': Assets.waterLeakNormal,
    'NCPS': Assets.sensors,
  };

  static String getDeviceIconByTypeCode(String? typeCode) {
    if (typeCode == null) return Assets.logoHorizontal;
    return _iconMap[typeCode] ?? Assets.logoHorizontal;
  }
}