import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/one_touch_bloc/one_touch_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/one_touch_bloc/one_touch_event.dart';
import 'package:syncrow_app/features/devices/bloc/one_touch_bloc/one_touch_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/one_touch_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/circular_button.dart';
import 'package:syncrow_app/features/devices/view/widgets/device_appbar.dart';
import 'package:syncrow_app/features/devices/view/widgets/one_touch/one_touch_setting.dart';
import 'package:syncrow_app/features/devices/view/widgets/one_touch/one_touch_timer_screen.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/gang_switch.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.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';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';

class OneTouchScreen extends StatelessWidget {
  const OneTouchScreen({super.key, this.device});

  final DeviceModel? device;
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle(
        statusBarColor: ColorsManager.primaryColor.withOpacity(0.5),
        statusBarIconBrightness: Brightness.light,
      ),
      child: Scaffold(
        backgroundColor: ColorsManager.backgroundColor,
        extendBodyBehindAppBar: true,
        extendBody: true,
        appBar: device != null
            ? DeviceAppbar(
                deviceName: device!.name!,
                deviceUuid: device!.uuid!,
              )
            : AppBar(
                backgroundColor: Colors.transparent,
                centerTitle: true,
                title: BodyLarge(
                  text: device?.name ?? 'Lights',
                  fontColor: ColorsManager.primaryColor,
                  fontWeight: FontsManager.bold,
                ),
              ),
        body: Container(
          width: MediaQuery.sizeOf(context).width,
          height: MediaQuery.sizeOf(context).height,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                Assets.assetsImagesBackground,
              ),
              fit: BoxFit.cover,
              opacity: 0.4,
            ),
          ),
          child: SafeArea(
            child: Padding(
              padding: EdgeInsets.only(
                left: Constants.defaultPadding,
                right: Constants.defaultPadding,
                bottom: Constants.bottomNavBarHeight,
              ),
              child: BlocProvider(
                create: (context) =>
                    OneTouchBloc(switchCode: 'switch_1', oneTouchId: device?.uuid ?? '')
                      ..add(const InitialEvent(groupScreen: false)),
                child: BlocBuilder<OneTouchBloc, OneTouchState>(
                  builder: (context, state) {
                    OneTouchModel oneTouchModel = OneTouchModel(
                        firstSwitch: false,
                        firstCountDown: 0,
                        light_mode: lightStatus.off,
                        relay: status.off,
                        relay_status_1: status.off);

                    // List<GroupOneTouchModel> groupOneTouchModel = [];
                    // bool allSwitchesOn = false;

                    if (state is LoadingNewSate) {
                      oneTouchModel = state.oneTouchModel;
                    } else if (state is UpdateState) {
                      oneTouchModel = state.oneTouchModel;
                    }
                    // else if (state is UpdateGroupState) {
                    //   groupOneTouchModel = state.oneTouchList;
                    //   allSwitchesOn = state.allSwitches;
                    // }
                    return state is LoadingInitialState
                        ? const Center(
                            child: DefaultContainer(
                                width: 50, height: 50, child: CircularProgressIndicator()),
                          )
                        : RefreshIndicator(
                            onRefresh: () async {
                              BlocProvider.of<OneTouchBloc>(context)
                                  .add(InitialEvent(groupScreen: device != null ? false : true));
                            },
                            child: ListView(
                              children: [
                                SizedBox(
                                  height: MediaQuery.of(context).size.height,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.stretch,
                                    children: [
                                      const Expanded(child: SizedBox.shrink()),
                                      Expanded(
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                                          crossAxisAlignment: CrossAxisAlignment.center,
                                          children: [
                                            Column(
                                              children: [
                                                GangSwitch(
                                                  threeGangSwitch: device!,
                                                  value: oneTouchModel.firstSwitch,
                                                  action: () {
                                                    BlocProvider.of<OneTouchBloc>(context).add(
                                                        ChangeFirstSwitchStatusEvent(
                                                            value: oneTouchModel.firstSwitch));
                                                  },
                                                ),
                                                const SizedBox(height: 20),
                                                const SizedBox(
                                                  width: 70,
                                                  child: BodySmall(
                                                    text: " Entrance Light",
                                                    fontColor: ColorsManager.textPrimaryColor,
                                                    textAlign: TextAlign.center,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ],
                                        ),
                                      ),
                                      Center(
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.center,
                                          crossAxisAlignment: CrossAxisAlignment.center,
                                          children: [
                                            CircularButton(
                                              device: device,
                                              icons: Icons.access_time,
                                              label: 'Timer',
                                              onTap: () {
                                                Navigator.push(
                                                    context,
                                                    PageRouteBuilder(
                                                        pageBuilder:
                                                            (context, animation1, animation2) =>
                                                                TimerScheduleScreen(
                                                                  switchCode: 'switch_1',
                                                                  device: device!,
                                                                  deviceCode: 'countdown_1',
                                                                )));
                                              },
                                            ),
                                            const SizedBox(
                                              width: 30,
                                            ),
                                            CircularButton(
                                              device: device,
                                              icons: Icons.settings,
                                              label: 'Setting',
                                              onTap: () {
                                                Navigator.push(
                                                    context,
                                                    PageRouteBuilder(
                                                        pageBuilder:
                                                            (context, animation1, animation2) =>
                                                                OneTouchSetting(
                                                                  device: device,
                                                                )));
                                              },
                                            ),
                                          ],
                                        ),
                                      ),
                                      const Expanded(child: SizedBox())
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
