import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/view/device_settings/faq_page.dart';
import 'package:syncrow_app/features/devices/view/device_settings/info_page.dart';
import 'package:syncrow_app/features/devices/view/device_settings/profile_page.dart';
import 'package:syncrow_app/features/devices/view/device_settings/share_Device_page.dart';
import 'package:syncrow_app/features/devices/view/device_settings/update_dialog.dart';
import 'package:syncrow_app/features/devices/view/device_settings/update_page.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/delete_device_dialogs.dart';
import 'package:syncrow_app/features/shared_widgets/setting_widget.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class SettingsPage extends StatelessWidget {
  final DeviceModel? device;

  const SettingsPage({super.key, this.device});

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) {
        if (didPop) {
          return;
        }
        Navigator.of(context).pop(true);
      },
      child: DefaultScaffold(
        title: 'Device Settings',
        child: BlocProvider(
          create: (context) => DeviceSettingBloc(deviceId: device?.uuid ?? '')
            ..add(const DeviceSettingInitial())
            ..add(const DeviceSettingInitialInfo()),
          child: BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
            builder: (context, state) {
              final _bloc = BlocProvider.of<DeviceSettingBloc>(context);

              return state is DeviceSettingLoadingState
                  ? const Center(
                      child: DefaultContainer(
                          width: 50,
                          height: 50,
                          child: CircularProgressIndicator()),
                    )
                  : ListView(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(
                            vertical: 10,
                          ),
                          child: InkWell(
                            onTap: () async {
                              bool val = await Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (context) => SettingProfilePage(
                                    device: device,
                                  ),
                                ),
                              );
                              if (val == true) {
                                _bloc.add(const DeviceSettingInitialInfo());
                              }
                            },
                            child: Stack(
                              children: [
                                Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.stretch,
                                  children: [
                                    const SizedBox(height: 20),
                                    DefaultContainer(
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(30)),
                                      child: Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Padding(
                                          padding:
                                              const EdgeInsets.only(left: 90),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Expanded(
                                                child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    SizedBox(
                                                        child: Text(
                                                      _bloc.deviceInfo.name,
                                                      style: const TextStyle(
                                                        fontSize: 16,
                                                        fontWeight:
                                                            FontWeight.w700,
                                                        color: ColorsManager
                                                            .grayColor,
                                                      ),
                                                      overflow: TextOverflow
                                                          .ellipsis, // Adds ellipsis (...) when the text overflows.
                                                      maxLines:
                                                          1, // Restricts the text to a single line.
                                                    )),
                                                    const SizedBox(
                                                      height: 5,
                                                    ),
                                                    BodySmall(
                                                        text: _bloc
                                                            .deviceInfo
                                                            .subspace
                                                            .subspaceName),
                                                  ],
                                                ),
                                              ),
                                              SvgPicture.asset(
                                                Assets.editNameSetting,
                                                fit: BoxFit.contain,
                                                height: 30,
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Positioned(
                                  top: 0,
                                  left: 20,
                                  child: CircleAvatar(
                                      radius: 43,
                                      backgroundColor: Colors.white,
                                      child: CircleAvatar(
                                        radius: 40,
                                        backgroundColor: Colors.white,
                                        child: CircleAvatar(
                                          radius: 40,
                                          backgroundColor:
                                              ColorsManager.backgroundColor,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              device!.type == 'NCPS'
                                                  ? SizedBox(
                                                      height: 80,
                                                      width: 50,
                                                      child: SvgPicture.asset(
                                                        Assets.flushIcon,
                                                        fit: BoxFit.contain,
                                                      ),
                                                    )
                                                  : device!.type == "SOS"
                                                      ? ClipOval(
                                                          child:
                                                              SvgPicture.asset(
                                                            Assets.sosHomeIcon,
                                                            fit: BoxFit.contain,
                                                            height: 70,
                                                          ),
                                                        )
                                                      : Padding(
                                                          padding: device!
                                                                      .type ==
                                                                  "4S"
                                                              ? const EdgeInsets
                                                                  .only(top: 5)
                                                              : const EdgeInsets
                                                                  .only(top: 0),
                                                          child: SizedBox(
                                                            height: 70,
                                                            child: SvgPicture
                                                                .asset(
                                                              device!.type ==
                                                                      "4S"
                                                                  ? Assets
                                                                      .fourSceneIcon
                                                                  : Assets
                                                                      .sixSceneIcon,
                                                              fit: BoxFit
                                                                  .contain,
                                                            ),
                                                          ),
                                                        ),
                                            ],
                                          ),
                                        ),
                                      )),
                                ),
                              ],
                            ),
                          ),
                        ),
                        const SizedBox(height: 20),
                        const BodyMedium(
                          text: 'Device Management',
                          fontWeight: FontWeight.w700,
                          fontSize: 12,
                          fontColor: ColorsManager.grayColor,
                        ),
                        DefaultContainer(
                          child: Column(
                            children: [
                              SettingWidget(
                                onTap: () {
                                  Navigator.of(context).push(
                                    MaterialPageRoute(
                                        builder: (context) => SettingInfoPage(
                                              device: device!,
                                            )),
                                  );
                                },
                                text: 'Device Information',
                                icon: Assets.infoIcon,
                              ),
                              // const Divider(
                              //   color: ColorsManager.dividerColor,
                              // ),
                              // SettingWidget(
                              //   onTap: () {
                              //     Navigator.of(context).push(
                              //       MaterialPageRoute(
                              //           builder: (context) =>
                              //               ShareFourScenePage(
                              //                   device: device!)),
                              //     );
                              //   },
                              //   text: 'Tap-to Run and Automation',
                              //   icon: Assets.tapRunIcon,
                              // ),
                            ],
                          ),
                        ),
                        const SizedBox(height: 20),
                        // const BodyMedium(
                        //   text: 'Device Offline Notification',
                        //   fontWeight: FontWeight.w700,
                        //   fontSize: 12,
                        //   fontColor: ColorsManager.grayColor,
                        // ),
                        // DefaultContainer(
                        //   child: Column(
                        //     children: [
                        //       SettingWidget(
                        //         value: _bloc.enableAlarm,
                        //         onChanged: (p0) {
                        //           context
                        //               .read<DeviceSettingBloc>()
                        //               .add(ToggleEnableAlarmEvent(p0));
                        //         },
                        //         isNotification: true,
                        //         onTap: () {},
                        //         text: 'Offline Notification',
                        //         icon: Assets.notificationIcon,
                        //       ),
                        //     ],
                        //   ),
                        // ),
                        // const SizedBox(height: 20),
                        // const BodyMedium(
                        //   text: 'Others',
                        //   fontWeight: FontWeight.w700,
                        //   fontSize: 12,
                        //   fontColor: ColorsManager.grayColor,
                        // ),
                        // const SizedBox(height: 5),
                        // DefaultContainer(
                        //   child: Column(
                        //     children: [
                        //       SettingWidget(
                        //         onTap: () {
                        //           Navigator.of(context).push(
                        //             MaterialPageRoute(
                        //                 builder: (context) =>
                        //                     ShareDevicePage(device: device!)),
                        //           );
                        //         },
                        //         text: 'Share Device',
                        //         icon: Assets.shareIcon,
                        //       ),
                        //       // const Divider(
                        //       //   color: ColorsManager.dividerColor,
                        //       // ),
                        //       // SettingWidget(
                        //       //   onTap: () {
                        //       //     Navigator.of(context).push(
                        //       //       MaterialPageRoute(
                        //       //           builder: (context) =>
                        //       //               FourSceneCreateGroup(
                        //       //                   device: device!)),
                        //       //     );
                        //       //   },
                        //       //   text: 'Create Group',
                        //       //   icon: Assets.createGroupIcon,
                        //       // ),
                        //       const Divider(
                        //         color: ColorsManager.dividerColor,
                        //       ),
                        //       SettingWidget(
                        //         onTap: () {
                        //           Navigator.of(context).push(
                        //             MaterialPageRoute(
                        //                 builder: (context) =>
                        //                     FaqSettingPage(device: device!)),
                        //           );
                        //         },
                        //         text: 'Device FAQ',
                        //         icon: Assets.faqIcon,
                        //       ),
                        //       const Divider(
                        //         color: ColorsManager.dividerColor,
                        //       ),
                        //       SettingWidget(
                        //         onTapUpdate: () {
                        //           showDialog(
                        //             context: context,
                        //             builder: (context) {
                        //               return UpdateInfoDialog(
                        //                 cancelTab: () {
                        //                   Navigator.of(context).pop();
                        //                 },
                        //                 confirmTab: () {
                        //                   Navigator.of(context).pop();
                        //                 },
                        //               );
                        //             },
                        //           );
                        //         },
                        //         isUpdate: true,
                        //         onTap: () {
                        //           Navigator.of(context).push(
                        //             MaterialPageRoute(
                        //                 builder: (context) =>
                        //                     const UpdatePageSetting()),
                        //           );
                        //         },
                        //         text: 'Device Update',
                        //         icon: Assets.updateIcon,
                        //       ),
                        //     ],
                        //   ),
                        // ),
                        const SizedBox(height: 20),
                        InkWell(
                          onTap: () {
                            showModalBottomSheet(
                              context: context,
                              builder: (BuildContext context) {
                                return Container(
                                  height: 200,
                                  padding: const EdgeInsets.all(16.0),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      const BodyMedium(
                                        text: 'Remove Device',
                                        fontWeight: FontWeight.w700,
                                        fontSize: 16,
                                        fontColor: ColorsManager.red,
                                      ),
                                      const SizedBox(height: 10),
                                      const SizedBox(
                                        width: 250,
                                        child: Divider(
                                          color: ColorsManager.dividerColor,
                                        ),
                                      ),
                                      const SizedBox(height: 10),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          InkWell(
                                            onTap: () {
                                              showDialog(
                                                context: context,
                                                builder: (context) {
                                                  return DisconnectDeviceDialog(
                                                    cancelTab: () {
                                                      Navigator.of(context)
                                                          .pop();
                                                    },
                                                    confirmTab: () {
                                                      Navigator.of(context)
                                                          .pop();
                                                    },
                                                  );
                                                },
                                              );
                                            },
                                            child: const BodyMedium(
                                              text: 'Disconnect Device',
                                              fontWeight: FontWeight.w400,
                                              fontSize: 15,
                                              fontColor: ColorsManager
                                                  .textPrimaryColor,
                                            ),
                                          ),
                                          const Icon(
                                            Icons.keyboard_arrow_right,
                                            color: ColorsManager.textGray,
                                          )
                                        ],
                                      ),
                                      const SizedBox(height: 20),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          InkWell(
                                            onTap: () {
                                              showDialog(
                                                context: context,
                                                builder: (context) {
                                                  return DisconnectWipeData(
                                                    cancelTab: () {
                                                      Navigator.of(context)
                                                          .pop();
                                                    },
                                                    confirmTab: () {
                                                      _bloc.add(
                                                          DeleteDeviceEvent());
                                                    },
                                                  );
                                                },
                                              );
                                            },
                                            child: const BodyMedium(
                                              text:
                                                  'Disconnect Device and Wipe Data',
                                              fontWeight: FontWeight.w400,
                                              fontSize: 15,
                                              fontColor: ColorsManager
                                                  .textPrimaryColor,
                                            ),
                                          ),
                                          const Icon(
                                            Icons.keyboard_arrow_right,
                                            color: ColorsManager.textGray,
                                          )
                                        ],
                                      ),
                                    ],
                                  ),
                                );
                              },
                            );
                          },
                          child: const Center(
                            child: BodyMedium(
                              text: 'Remove Device',
                              fontWeight: FontWeight.w400,
                              fontSize: 15,
                              fontColor: ColorsManager.red,
                            ),
                          ),
                        ),
                      ],
                    );
            },
          ),
        ),
      ),
    );
  }
}
