import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/scene/bloc/create_scene/create_scene_bloc.dart';
import 'package:syncrow_app/features/scene/enum/create_scene_enum.dart';
import 'package:syncrow_app/features/scene/widgets/alert_dialogs/icons_dialog.dart';
import 'package:syncrow_app/features/scene/widgets/delete_routine_b.dart';
import 'package:syncrow_app/features/scene/widgets/effective_period_setting/effective_period_bottom_sheet.dart';
import 'package:syncrow_app/features/scene/widgets/scene_list_tile.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/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class SceneAutoSettings extends StatelessWidget {
  const SceneAutoSettings({super.key});

  @override
  Widget build(BuildContext context) {
    final sceneSettings =
        ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>? ??
            {};
    final sceneId = sceneSettings['sceneId'] as String? ?? '';
    final isAutomation = context.read<CreateSceneBloc>().sceneType ==
        CreateSceneEnum.deviceStatusChanges;
    final sceneName = sceneSettings['sceneName'] as String? ?? '';
    bool showInDevice = context.read<CreateSceneBloc>().showInDeviceScreen;
    String selectedIcon = '';
    return DefaultScaffold(
        title: 'Settings',
        padding: EdgeInsets.zero,
        leading: IconButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            icon: const Icon(
              Icons.arrow_back_ios,
            )),
        child: BlocBuilder<CreateSceneBloc, CreateSceneState>(
            builder: (context, state) {
          if (state is AddSceneTask) {
            showInDevice = state.showInDevice ?? false;
          }

          return SizedBox(
            height: MediaQuery.sizeOf(context).height,
            child: Column(
              children: [
                if (!isAutomation)
                  DefaultContainer(
                      child: Padding(
                    padding: const EdgeInsets.only(
                        top: 10, left: 10, right: 10, bottom: 10),
                    child: Column(
                      children: [
                        InkWell(
                          onTap: () {
                            showDialog(
                              context: context,
                              builder: (context) {
                                BlocProvider.of<CreateSceneBloc>(context)
                                    .add(SceneIconEvent());
                                return IconsDialog(
                                  widgetList: Container(
                                    height:
                                        MediaQuery.sizeOf(context).height * 0.4,
                                    width: MediaQuery.sizeOf(context).width,
                                    padding: const EdgeInsets.all(24),
                                    child: BlocBuilder<CreateSceneBloc,
                                        CreateSceneState>(
                                      builder: (context, state) {
                                        if (state is CreateSceneLoading) {
                                          return const Center(
                                            child: SizedBox(
                                                height: 50,
                                                width: 50,
                                                child:
                                                    CircularProgressIndicator()),
                                          );
                                        } else if (state is AddSceneTask) {
                                          return GridView.builder(
                                            gridDelegate:
                                                const SliverGridDelegateWithFixedCrossAxisCount(
                                              crossAxisCount: 5,
                                              crossAxisSpacing: 12,
                                              mainAxisSpacing: 12,
                                            ),
                                            itemCount:
                                                state.iconModels?.length ?? 0,
                                            itemBuilder: (context, index) {
                                              final iconModel =
                                                  state.iconModels![index];
                                              return InkWell(
                                                onTap: () {
                                                  BlocProvider.of<
                                                              CreateSceneBloc>(
                                                          context)
                                                      .add(IconSelected(
                                                          iconId:
                                                              iconModel.uuid,
                                                          confirmSelection:
                                                              false));
                                                  selectedIcon = iconModel.uuid;
                                                },
                                                child: ClipOval(
                                                  child: Container(
                                                    padding:
                                                        const EdgeInsets.all(1),
                                                    decoration: BoxDecoration(
                                                      border: Border.all(
                                                        color: state.selectedIcon ==
                                                                iconModel.uuid
                                                            ? ColorsManager
                                                                .primaryColorWithOpacity
                                                            : Colors
                                                                .transparent,
                                                        width: 2,
                                                      ),
                                                      shape: BoxShape.circle,
                                                    ),
                                                    child: Image.memory(
                                                      iconModel.iconBytes,
                                                      width: 35,
                                                      height: 35,
                                                    ),
                                                  ),
                                                ),
                                              );
                                            },
                                          );
                                        } else if (state is CreateSceneError) {
                                          return Text(state.message);
                                        } else {
                                          return Container();
                                        }
                                      },
                                    ),
                                  ),
                                  cancelTab: () {
                                    Navigator.of(context).pop();
                                  },
                                  confirmTab: () {
                                    BlocProvider.of<CreateSceneBloc>(context)
                                        .add(IconSelected(
                                            iconId: selectedIcon,
                                            confirmSelection: true));
                                    Navigator.of(context).pop();
                                  },
                                  title: 'Icons',
                                );
                              },
                            );
                          },
                          child: const Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              BodyMedium(text: 'Icons'),
                              Icon(
                                Icons.arrow_forward_ios_outlined,
                                color: ColorsManager.textGray,
                                size: 15,
                              )
                            ],
                          ),
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        const Divider(
                          color: ColorsManager.graysColor,
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            const BodyMedium(text: 'Show on devices page'),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Container(
                                  height: 30,
                                  width: 1,
                                  color: ColorsManager.graysColor,
                                ),
                                Transform.scale(
                                  scale: .8,
                                  child: CupertinoSwitch(
                                    value: showInDevice,
                                    onChanged: (value) {
                                      BlocProvider.of<CreateSceneBloc>(context)
                                          .add(ShowOnDeviceClicked(
                                              value: value));
                                    },
                                    applyTheme: true,
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        const Divider(
                          color: ColorsManager.graysColor,
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        const Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            //Cloud
                            BodyMedium(text: 'Executed by'),
                            Text('Cloud',
                                style: TextStyle(
                                  color: ColorsManager.textGray,
                                )),
                          ],
                        ),
                      ],
                    ),
                  )),
                if (isAutomation)
                  DefaultContainer(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const SizedBox(
                          height: 8,
                        ),
                        Visibility(
                          visible: isAutomation,
                          child: SceneListTile(
                            titleString: "Effective Period",
                            trailingWidget:
                                const Icon(Icons.arrow_forward_ios_rounded),
                            onPressed: () {
                              context.customBottomSheet(
                                child: const EffectPeriodBottomSheetContent(),
                              );
                            },
                          ),
                        ),
                        Visibility(
                          visible: sceneName.isNotEmpty && isAutomation,
                          child: SizedBox(
                            width: context.width * 0.9,
                            child: const Divider(
                              color: ColorsManager.greyColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                const SizedBox(
                  height: 15,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      child: Center(
                        child: Visibility(
                          visible: sceneName.isNotEmpty,
                          child: DeleteRoutineButton(
                            isAutomation: isAutomation,
                            sceneId: sceneId,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        }));
  }
}