import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_gang_bloc/three_gang_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_gang_bloc/three_gang_event.dart';
import 'package:syncrow_app/features/devices/bloc/three_gang_bloc/three_gang_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/three_gang_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/gang_switch.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/schedule_screen.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

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

  final DeviceModel? device;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ThreeGangBloc(switchCode: '', threeGangId: device?.uuid ?? '')
        ..add(InitialEvent(groupScreen: device != null ? false : true)),
      child: BlocBuilder<ThreeGangBloc, ThreeGangState>(
        builder: (context, state) {
          ThreeGangModel threeGangModel = ThreeGangModel(
              firstSwitch: false,
              secondSwitch: false,
              thirdSwitch: false,
              firstCountDown: 0,
              secondCountDown: 0,
              thirdCountDown: 0);

          if (state is LoadingNewSate) {
            threeGangModel = state.threeGangModel;
          } else if (state is UpdateState) {
            threeGangModel = state.threeGangModel;
          }
          return state is LoadingInitialState
              ? const Center(
                  child:
                      DefaultContainer(width: 50, height: 50, child: CircularProgressIndicator()),
                )
              : RefreshIndicator(
                  onRefresh: () async {
                    BlocProvider.of<ThreeGangBloc>(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: threeGangModel.firstSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeGangBloc>(context).add(
                                              ChangeFirstSwitchStatusEvent(
                                                  value: threeGangModel.firstSwitch));
                                        },
                                        // control: DeviceControlModel(
                                        //   deviceId: device.uuid,
                                        //   // code: 'switch_1',
                                        //   code: device.status[0].code,
                                        //   // value: true,
                                        //   value: device.status[0].value,
                                        // ),
                                      ),
                                      const SizedBox(height: 20),
                                      const SizedBox(
                                        width: 70,
                                        child: BodySmall(
                                          text: "Bedside Light",
                                          fontColor: ColorsManager.textPrimaryColor,
                                          textAlign: TextAlign.center,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      GangSwitch(
                                        threeGangSwitch: device!,
                                        value: threeGangModel.secondSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeGangBloc>(context).add(
                                              ChangeSecondSwitchStatusEvent(
                                                  value: threeGangModel.secondSwitch));
                                        },
                                        // control: DeviceControlModel(
                                        //   // deviceId: 'bfe10693d4fd263206ocq9',
                                        //   // code: 'switch_2',
                                        //   // value: true,
                                        //   deviceId: device.uuid,
                                        //   code: device.status[1].code,
                                        //   value: device.status[1].value,
                                        // ),
                                      ),
                                      const SizedBox(height: 20),
                                      const SizedBox(
                                        width: 70,
                                        child: BodySmall(
                                          text: "Ceiling Light",
                                          fontColor: ColorsManager.textPrimaryColor,
                                          textAlign: TextAlign.center,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      GangSwitch(
                                        threeGangSwitch: device!,
                                        value: threeGangModel.thirdSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeGangBloc>(context).add(
                                              ChangeThirdSwitchStatusEvent(
                                                  value: threeGangModel.thirdSwitch));
                                        },
                                      ),
                                      const SizedBox(height: 20),
                                      const SizedBox(
                                        width: 70,
                                        child: BodySmall(
                                          text: "Spotlight",
                                          fontColor: ColorsManager.textPrimaryColor,
                                          textAlign: TextAlign.center,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Center(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Card(
                                        elevation: 3,
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(100),
                                        ),
                                        child: GestureDetector(
                                          onTap: () {
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_1',
                                            //     value: true,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_2',
                                            //     value: true,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_3',
                                            //     value: true,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            BlocProvider.of<ThreeGangBloc>(context)
                                                .add(AllOnEvent());
                                          },
                                          child: Stack(
                                            alignment: Alignment.center,
                                            children: [
                                              Container(
                                                width: 60,
                                                height: 60,
                                                decoration: BoxDecoration(
                                                  color: Colors.grey[300],
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                              ),
                                              Container(
                                                width: 40,
                                                height: 40,
                                                decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                                child: Center(
                                                  child: BodySmall(
                                                    text: "On",
                                                    style: context.bodyMedium.copyWith(
                                                        color:
                                                            ColorsManager.primaryColorWithOpacity,
                                                        fontWeight: FontWeight.bold),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                      const SizedBox(height: 10),
                                      BodySmall(
                                        text: "All On",
                                        style: context.bodyMedium.copyWith(
                                          color: ColorsManager.textPrimaryColor,
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Card(
                                        elevation: 3,
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(100),
                                        ),
                                        child: GestureDetector(
                                          onTap: () {
                                            Navigator.push(
                                                context,
                                                PageRouteBuilder(
                                                    pageBuilder:
                                                        (context, animation1, animation2) =>
                                                            ScheduleScreen(
                                                              device: device!,
                                                            )));
                                          },
                                          child: Stack(
                                            alignment: Alignment.center,
                                            children: [
                                              Container(
                                                width: 60,
                                                height: 60,
                                                decoration: BoxDecoration(
                                                  color: Colors.grey[300],
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                              ),
                                              Container(
                                                width: 40,
                                                height: 40,
                                                decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                                child: Center(
                                                  child: Icon(
                                                    Icons.access_time,
                                                    color: ColorsManager.primaryColorWithOpacity,
                                                    size: 25,
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                      const SizedBox(height: 10),
                                      BodySmall(
                                        text: "Timer",
                                        style: context.bodyMedium.copyWith(
                                          color: ColorsManager.textPrimaryColor,
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Card(
                                        elevation: 3,
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(100),
                                        ),
                                        child: GestureDetector(
                                          onTap: () {
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_1',
                                            //     value: false,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_2',
                                            //     value: false,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            // DevicesCubit.getInstance().deviceControl(
                                            //   DeviceControlModel(
                                            //     deviceId: device.uuid,
                                            //     code: 'switch_3',
                                            //     value: false,
                                            //   ),
                                            //   device.uuid!,
                                            // );
                                            BlocProvider.of<ThreeGangBloc>(context)
                                                .add(AllOffEvent());
                                          },
                                          child: Stack(
                                            alignment: Alignment.center,
                                            children: [
                                              Container(
                                                width: 60,
                                                height: 60,
                                                decoration: BoxDecoration(
                                                  color: Colors.grey[300],
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                              ),
                                              Container(
                                                width: 40,
                                                height: 40,
                                                decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius: BorderRadius.circular(100),
                                                ),
                                                child: Center(
                                                  child: BodySmall(
                                                    text: "Off",
                                                    style: context.bodyMedium.copyWith(
                                                        color:
                                                            ColorsManager.primaryColorWithOpacity,
                                                        fontWeight: FontWeight.bold),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                      const SizedBox(height: 10),
                                      BodySmall(
                                        text: "All Off",
                                        style: context.bodyMedium.copyWith(
                                          color: ColorsManager.textPrimaryColor,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Expanded(child: SizedBox())
                          ],
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}
