import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/two_gang_bloc/two_gang_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/two_gang_bloc/two_gang_event.dart';
import 'package:syncrow_app/features/devices/bloc/two_gang_bloc/two_gang_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/two_gang_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/gang_switch.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_gang/two_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 TwoGangScreen extends StatelessWidget {
  const TwoGangScreen({super.key, this.device, this.switchCode});
  final DeviceModel? device;
  final String? switchCode;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TwoGangBloc(switchCode: switchCode ?? '', twoGangId: device?.uuid ?? '')
        ..add(const InitialEvent()),
      child: BlocBuilder<TwoGangBloc, TwoGangState>(
        builder: (context, state) {
          TwoGangModel twoGangModel = TwoGangModel(
            firstSwitch: false,
            secondSwitch: false,
            firstCountDown: 0,
            secondCountDown: 0,
          );

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

          return state is LoadingInitialState
              ? const Center(
                  child:
                      DefaultContainer(width: 50, height: 50, child: CircularProgressIndicator()),
                )
              : RefreshIndicator(
                  onRefresh: () async {
                    BlocProvider.of<TwoGangBloc>(context).add(const InitialEvent());
                  },
                  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: twoGangModel.firstSwitch,
                                        action: () {
                                          BlocProvider.of<TwoGangBloc>(context).add(
                                              ChangeFirstSwitchStatusEvent(
                                                  value: twoGangModel.firstSwitch));
                                        },
                                      ),
                                      const SizedBox(height: 20),
                                      const SizedBox(
                                        width: 77,
                                        child: BodySmall(
                                          text: "Cove Light",
                                          fontColor: ColorsManager.textPrimaryColor,
                                          textAlign: TextAlign.center,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      GangSwitch(
                                        threeGangSwitch: device!,
                                        value: twoGangModel.secondSwitch,
                                        action: () {
                                          BlocProvider.of<TwoGangBloc>(context).add(
                                              ChangeSecondSwitchStatusEvent(
                                                  value: twoGangModel.secondSwitch));
                                        },
                                      ),
                                      const SizedBox(height: 20),
                                      const SizedBox(
                                        width: 77,
                                        child: BodySmall(
                                          text: "Chandelier",
                                          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: () {
                                            BlocProvider.of<TwoGangBloc>(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) =>
                                                            TwoGangScheduleScreen(
                                                              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<TwoGangBloc>(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())
                          ],
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}
