import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/four_scene_bloc/four_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/four_scene_bloc/four_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/four_scene_bloc/four_scene_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/four_scene_model.dart';
import 'package:syncrow_app/features/devices/view/device_settings/settings_page.dart';
import 'package:syncrow_app/features/devices/view/widgets/four_scene_switch/four_select_scene_page.dart';
import 'package:syncrow_app/features/devices/view/widgets/four_scene_switch/four_select_switch_dialog.dart';
import 'package:syncrow_app/features/devices/view/widgets/four_scene_switch/four_switches_card.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_small.dart';
import 'package:syncrow_app/generated/assets.dart';

class FourSceneScreen extends StatelessWidget {
  final DeviceModel? device;

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => FourSceneBloc(fourSceneId: device?.uuid ?? '')
        ..add(const FourSceneInitial())
        ..add(const FourSceneInitialInfo())
        ..add(const FourSceneSwitchInitial()),
      child: BlocBuilder<FourSceneBloc, FourSceneState>(
        builder: (context, state) {
          final _bloc = BlocProvider.of<FourSceneBloc>(context);

          FourSceneModelState model = FourSceneModelState(
            scene_1: '',
            scene_2: '',
            scene_3: '',
            scene_4: '',
            scene_id_group_id: '',
            switch_backlight: '',
          );

          if (state is LoadingNewSate) {
            model = state.device;
          } else if (state is UpdateState) {
            model = state.device;
          }

          return DefaultScaffold(
            title: _bloc.deviceInfo.name,
            actions: [
              InkWell(
                onTap: () async {
                  var val = await Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => SettingsPage(device: device!),
                    ),
                  );
                  if (val == null || val == true) {
                    _bloc.add(const FourSceneInitial());
                    _bloc.add(const FourSceneInitialInfo());
                    _bloc.add(const FourSceneSwitchInitial());
                  }
                },
                child: SvgPicture.asset(Assets.assetsIconsSettings),
              ),
              const SizedBox(width: 10),
            ],
            child: state is FourSceneLoadingState
                ? const Center(
                    child: DefaultContainer(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator(),
                    ),
                  )
                : RefreshIndicator(
                    onRefresh: () async {
                      _bloc.add(const FourSceneInitial());
                    },
                    child: ListView(
                      children: [
                        SizedBox(
                          height: MediaQuery.sizeOf(context).height * 0.8,
                          child: Column(
                            children: [
                              FourSwitchsCard(
                                title1: model.scene_1,
                                title2: model.scene_2,
                                title3: model.scene_3,
                                title4: model.scene_4,
                                switch1: _bloc.deviceStatus.switch_backlight
                                    ? Assets.switchOn
                                    : Assets.switchOff,
                                switch2: _bloc.deviceStatus.switch_backlight
                                    ? Assets.switchOn
                                    : Assets.switchOff,
                                switch3: _bloc.deviceStatus.switch_backlight
                                    ? Assets.switchOn
                                    : Assets.switchOff,
                                switch4: _bloc.deviceStatus.switch_backlight
                                    ? Assets.switchOn
                                    : Assets.switchOff,
                                onSwitch1UpTap: () {
                                  debugPrint("Switch 1 Up tapped");
                                },
                                onSwitch2UpTap: () {
                                  debugPrint("Switch 2 Up tapped");
                                },
                                onSwitch3DownTap: () {
                                  debugPrint("onSwitch3DownTap");
                                },
                                onSwitch4DownTap: () {
                                  debugPrint("onSwitch4DownTap");
                                },
                              ),
                              Flexible(
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: DefaultContainer(
                                        onTap: () {
                                          _bloc.add(ChangeSwitchStatusEvent());
                                        },
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            ConstrainedBox(
                                              constraints: const BoxConstraints(
                                                maxHeight: 46,
                                                maxWidth: 50,
                                              ),
                                              child: SvgPicture.asset(
                                                  Assets.backlightIcon),
                                            ),
                                            const SizedBox(height: 15),
                                            const Flexible(
                                              child: FittedBox(
                                                child: BodySmall(
                                                  text: 'Backlight',
                                                  textAlign: TextAlign.center,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    const SizedBox(width: 10),
                                    Expanded(
                                      child: DefaultContainer(
                                        onTap: () async {
                                          var value = await showDialog(
                                            context: context,
                                            builder: (context) {
                                              return FourSelectSwitchDialog(
                                                switch1Title: model.scene_1,
                                                switch2Title: model.scene_2,
                                                switch3Title: model.scene_3,
                                                switch4Title: model.scene_4,
                                                cancelTab: () {
                                                  Navigator.of(context).pop();
                                                },
                                                confirmTab: (switchSelected) {
                                                  Navigator.of(context).push(
                                                    MaterialPageRoute(
                                                      builder: (context) =>
                                                          FourSelectSceneFourPage(
                                                        switchSelected:
                                                            switchSelected,
                                                        deviceId: device!.uuid,
                                                      ),
                                                    ),
                                                  );
                                                },
                                              );
                                            },
                                          );

                                          if (value == true) {
                                            Future.delayed(
                                                const Duration(
                                                    milliseconds: 250), () {
                                              _bloc.add(
                                                  const FourSceneSwitchInitial());
                                            });
                                          }
                                        },
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            ConstrainedBox(
                                              constraints: const BoxConstraints(
                                                maxHeight: 46,
                                                maxWidth: 50,
                                              ),
                                              child: SvgPicture.asset(
                                                  Assets.addSceneIcon),
                                            ),
                                            const SizedBox(height: 15),
                                            const Flexible(
                                              child: FittedBox(
                                                child: BodySmall(
                                                  text: 'Add Scene',
                                                  textAlign: TextAlign.center,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
          );
        },
      ),
    );
  }
}
