import 'package:flutter/material.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/device_management_content.dart';
import 'package:syncrow_web/pages/device_managment/device_setting/remove_device_widget.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/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,
    );
    return BlocProvider(
      create: (context) => SettingDeviceBloc(
        deviceId: device.uuid ?? '',
      )
        ..add(DeviceSettingInitialInfo())
        ..add(SettingBlocFetchRooms(
          communityUuid: device.community!.uuid!,
          spaceUuid: device.spaces!.first.uuid!,
        )),
      child: Builder(
        builder: (context) {
          return BlocBuilder<SettingDeviceBloc, DeviceSettingsState>(
            builder: (context, state) {
              final _bloc = context.read<SettingDeviceBloc>();
              final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(
                  device.productType);
              final deviceInfo = state is DeviceSettingsUpdate
                  ? state.deviceInfo ?? DeviceInfoModel.empty()
                  : DeviceInfoModel.empty();
              final subSpaces =
                  state is DeviceSettingsUpdate ? 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: [
                        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),
                        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),
                        Text('Device Management', style: sectionTitle),
                        DeviceManagementContent(
                          device: device,
                          subSpaces: subSpaces.cast<SubSpaceModel>(),
                          deviceInfo: deviceInfo,
                        ),
                        const SizedBox(height: 32),
                        RemoveDeviceWidget(bloc: _bloc),
                      ],
                    ),
                  ),
                  if (state is DeviceSettingsLoading)
                    Positioned.fill(
                      child: Container(
                        color: Colors.black.withOpacity(0.1),
                        child: const Center(
                          child: CircularProgressIndicator(
                            color: ColorsManager.primaryColor,
                          ),
                        ),
                      ),
                    ),
                ],
              );
            },
          );
        },
      ),
    );
  }
}