import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_event.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_state.dart';
import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/setting_bloc/setting_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/setting_bloc/setting_event.dart';
import 'package:syncrow_web/pages/routines/bloc/setting_bloc/setting_state.dart';
import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_automation_model.dart';
import 'package:syncrow_web/pages/routines/models/icon_model.dart';
import 'package:syncrow_web/pages/routines/view/effective_period_view.dart';
import 'package:syncrow_web/pages/routines/widgets/delete_scene.dart';
import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:flutter/cupertino.dart';

class SettingHelper {
  static Future<String?> showSettingDialog({
    required BuildContext context,
    String? iconId,
  }) async {
    return showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        final isAutomation = context.read<RoutineBloc>().state.isAutomation;
        final effectiveTime = context.read<RoutineBloc>().state.effectiveTime;

        return MultiBlocProvider(
          providers: [
            if (effectiveTime != null)
              BlocProvider(
                create: (_) => EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
              ),
            if (effectiveTime == null)
              BlocProvider(
                create: (_) => EffectPeriodBloc(),
              ),
            BlocProvider(
                create: (_) => SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
          ],
          child: AlertDialog(
            contentPadding: EdgeInsets.zero,
            content: BlocBuilder<EffectPeriodBloc, EffectPeriodState>(
                builder: (context, effectPeriodState) {
              return BlocBuilder<SettingBloc, SettingState>(
                builder: (context, settingState) {
                  String selectedIcon = '';
                  List<IconModel> list = [];
                  if (settingState is TabToRunSettingLoaded) {
                    selectedIcon = settingState.selectedIcon;
                    list = settingState.iconList;
                  }
                  return Container(
                    width: context.read<SettingBloc>().isExpanded ? 800 : 400,
                    height: context.read<SettingBloc>().isExpanded && isAutomation ? 500 : 350,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    padding: const EdgeInsets.only(top: 20),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const DialogHeader('Settings'),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              width: 400,
                              child: isAutomation
                                  ? Column(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                            padding: const EdgeInsets.only(
                                                top: 10, left: 10, right: 10, bottom: 10),
                                            child: Column(
                                              children: [
                                                InkWell(
                                                  onTap: () {},
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Text(
                                                        'Validity',
                                                        style: Theme.of(context)
                                                            .textTheme
                                                            .bodyMedium!
                                                            .copyWith(
                                                                color:
                                                                    ColorsManager.textPrimaryColor,
                                                                fontWeight: FontWeight.w400,
                                                                fontSize: 14),
                                                      ),
                                                      const Icon(
                                                        Icons.arrow_forward_ios_outlined,
                                                        color: ColorsManager.textGray,
                                                        size: 15,
                                                      )
                                                    ],
                                                  ),
                                                ),
                                                const SizedBox(
                                                  height: 5,
                                                ),
                                                const Divider(
                                                  color: ColorsManager.graysColor,
                                                ),
                                                const SizedBox(
                                                  height: 5,
                                                ),
                                                InkWell(
                                                  onTap: () {
                                                    BlocProvider.of<SettingBloc>(context).add(
                                                        FetchIcons(
                                                            expanded: !context
                                                                .read<SettingBloc>()
                                                                .isExpanded));
                                                  },
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Text(
                                                        'Effective Period',
                                                        style: Theme.of(context)
                                                            .textTheme
                                                            .bodyMedium!
                                                            .copyWith(
                                                                color:
                                                                    ColorsManager.textPrimaryColor,
                                                                fontWeight: FontWeight.w400,
                                                                fontSize: 14),
                                                      ),
                                                      const 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: [
                                                    Text(
                                                      'Executed by',
                                                      style: Theme.of(context)
                                                          .textTheme
                                                          .bodyMedium!
                                                          .copyWith(
                                                              color: ColorsManager.textPrimaryColor,
                                                              fontWeight: FontWeight.w400,
                                                              fontSize: 14),
                                                    ),
                                                    Text('Cloud',
                                                        style: Theme.of(context)
                                                            .textTheme
                                                            .bodyMedium!
                                                            .copyWith(
                                                                color: ColorsManager.textGray,
                                                                fontWeight: FontWeight.w400,
                                                                fontSize: 14)),
                                                  ],
                                                ),
                                                if (context.read<RoutineBloc>().state.isUpdate ??
                                                    false)
                                                  const DeleteSceneWidget()
                                              ],
                                            )),
                                      ],
                                    )
                                  : Column(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                            padding: const EdgeInsets.only(
                                                top: 10, left: 10, right: 10, bottom: 10),
                                            child: Column(
                                              children: [
                                                InkWell(
                                                  onTap: () {
                                                    BlocProvider.of<SettingBloc>(context).add(
                                                        FetchIcons(
                                                            expanded: !context
                                                                .read<SettingBloc>()
                                                                .isExpanded));
                                                  },
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Text(
                                                        'Icons',
                                                        style: Theme.of(context)
                                                            .textTheme
                                                            .bodyMedium!
                                                            .copyWith(
                                                                color:
                                                                    ColorsManager.textPrimaryColor,
                                                                fontWeight: FontWeight.w400,
                                                                fontSize: 14),
                                                      ),
                                                      const 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: [
                                                    Text(
                                                      'Show on devices page',
                                                      style: Theme.of(context)
                                                          .textTheme
                                                          .bodyMedium!
                                                          .copyWith(
                                                              color: ColorsManager.textPrimaryColor,
                                                              fontWeight: FontWeight.w400,
                                                              fontSize: 14),
                                                    ),
                                                    Row(
                                                      mainAxisAlignment: MainAxisAlignment.end,
                                                      children: [
                                                        Container(
                                                          height: 30,
                                                          width: 1,
                                                          color: ColorsManager.graysColor,
                                                        ),
                                                        Transform.scale(
                                                          scale: .8,
                                                          child: CupertinoSwitch(
                                                            value: true,
                                                            onChanged: (value) {},
                                                            applyTheme: true,
                                                          ),
                                                        ),
                                                      ],
                                                    )
                                                  ],
                                                ),
                                                const SizedBox(
                                                  height: 5,
                                                ),
                                                const Divider(
                                                  color: ColorsManager.graysColor,
                                                ),
                                                const SizedBox(
                                                  height: 5,
                                                ),
                                                Row(
                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                  children: [
                                                    Text(
                                                      'Executed by',
                                                      style: Theme.of(context)
                                                          .textTheme
                                                          .bodyMedium!
                                                          .copyWith(
                                                              color: ColorsManager.textPrimaryColor,
                                                              fontWeight: FontWeight.w400,
                                                              fontSize: 14),
                                                    ),
                                                    Text('Cloud',
                                                        style: Theme.of(context)
                                                            .textTheme
                                                            .bodyMedium!
                                                            .copyWith(
                                                                color: ColorsManager.textGray,
                                                                fontWeight: FontWeight.w400,
                                                                fontSize: 14)),
                                                  ],
                                                ),
                                                if (context.read<RoutineBloc>().state.isUpdate ??
                                                    false)
                                                  const DeleteSceneWidget()
                                              ],
                                            )),
                                      ],
                                    ),
                            ),
                            if (context.read<SettingBloc>().isExpanded && !isAutomation)
                              SizedBox(
                                  width: 400,
                                  height: 150,
                                  child: settingState is LoadingState
                                      ? const Center(child: CircularProgressIndicator())
                                      : GridView.builder(
                                          gridDelegate:
                                              const SliverGridDelegateWithFixedCrossAxisCount(
                                            crossAxisCount: 6,
                                            crossAxisSpacing: 12,
                                            mainAxisSpacing: 12,
                                          ),
                                          shrinkWrap: true,
                                          itemCount: list.length,
                                          itemBuilder: (context, index) {
                                            final iconModel = list[index];
                                            return SizedBox(
                                              width: 35,
                                              height: 35,
                                              child: InkWell(
                                                onTap: () {
                                                  BlocProvider.of<SettingBloc>(context)
                                                      .add(SelectIcon(
                                                    iconId: iconModel.uuid,
                                                  ));
                                                  selectedIcon = iconModel.uuid;
                                                },
                                                child: SizedBox(
                                                  child: ClipOval(
                                                    child: Container(
                                                      padding: const EdgeInsets.all(1),
                                                      decoration: BoxDecoration(
                                                        border: Border.all(
                                                          color: selectedIcon == iconModel.uuid
                                                              ? ColorsManager
                                                                  .primaryColorWithOpacity
                                                              : Colors.transparent,
                                                          width: 2,
                                                        ),
                                                        shape: BoxShape.circle,
                                                      ),
                                                      child: Image.memory(
                                                        iconModel.iconBytes,
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            );
                                          },
                                        )),
                            if (context.read<SettingBloc>().isExpanded && isAutomation)
                              const SizedBox(height: 350, width: 400, child: EffectivePeriodView())
                          ],
                        ),
                        Container(
                          width: MediaQuery.sizeOf(context).width,
                          decoration: const BoxDecoration(
                            border: Border(
                              top: BorderSide(
                                color: ColorsManager.greyColor,
                              ),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                child: InkWell(
                                  onTap: () {
                                    Navigator.of(context).pop();
                                  },
                                  child: Container(
                                    alignment: AlignmentDirectional.center,
                                    child: Text(
                                      'Cancel',
                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                                            color: ColorsManager.textGray,
                                          ),
                                    ),
                                  ),
                                ),
                              ),
                              Container(width: 1, height: 50, color: ColorsManager.greyColor),
                              Expanded(
                                child: InkWell(
                                  onTap: () {
                                    if (isAutomation) {
                                      BlocProvider.of<RoutineBloc>(context).add(
                                          EffectiveTimePeriodEvent(EffectiveTime(
                                              start: effectPeriodState.customStartTime!,
                                              end: effectPeriodState.customEndTime!,
                                              loops: effectPeriodState.selectedDaysBinary)));
                                      Navigator.of(context).pop();
                                    } else {
                                      Navigator.of(context).pop(selectedIcon);
                                    }
                                  },
                                  child: Container(
                                    alignment: AlignmentDirectional.center,
                                    child: Text(
                                      'Confirm',
                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                                            color: ColorsManager.primaryColorWithOpacity,
                                          ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  );
                },
              );
            }),
          ),
        );
      },
    );
  }
}