import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/two_touch_bloc/two_touch_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/two_touch_bloc/two_touch_event.dart';
import 'package:syncrow_app/features/devices/bloc/two_touch_bloc/two_touch_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/two_touch_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/circular_button.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/gang_switch.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_touch/two_touch_setting.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_touch/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/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';

class TwoTouchScreen extends StatelessWidget {
  const TwoTouchScreen({super.key, this.device, this.switchCode});
  final DeviceModel? device;
  final String? switchCode;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TwoTouchBloc(
          switchCode: switchCode ?? '', twoTouchId: device?.uuid ?? '')
        ..add(const InitialEvent()),
      child: BlocBuilder<TwoTouchBloc, TwoTouchState>(
        builder: (context, state) {
          TwoTouchModel twoTouchModel = TwoTouchModel(
            firstSwitch: false,
            secondSwitch: false,
            firstCountDown: 0,
            secondCountDown: 0,
            light_mode: lightStatus.off,
            relay: status.off,
            relay_status_1: status.off,
            relay_status_2: status.off,
          );

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

          return state is LoadingInitialState
              ? const Center(
                  child: DefaultContainer(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator()),
                )
              : RefreshIndicator(
                  onRefresh: () async {
                    BlocProvider.of<TwoTouchBloc>(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: twoTouchModel.firstSwitch,
                                        action: () {
                                          BlocProvider.of<TwoTouchBloc>(context)
                                              .add(ChangeFirstSwitchStatusEvent(
                                                  value: twoTouchModel
                                                      .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: twoTouchModel.secondSwitch,
                                        action: () {
                                          BlocProvider.of<TwoTouchBloc>(context)
                                              .add(
                                                  ChangeSecondSwitchStatusEvent(
                                                      value: twoTouchModel
                                                          .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: [
                                  CircularButton(
                                    device: device,
                                    icons: Icons.u_turn_left,
                                    label: "All On",
                                    onTap: () {
                                      BlocProvider.of<TwoTouchBloc>(context)
                                          .add(AllOnEvent());
                                    },
                                  ),

                                  // Column(
                                  //   mainAxisSize: MainAxisSize.min,
                                  //   children: [

                                  //     Card(
                                  //       elevation: 3,
                                  //       shape: RoundedRectangleBorder(
                                  //         borderRadius:
                                  //             BorderRadius.circular(100),
                                  //       ),
                                  //       child: GestureDetector(
                                  //         onTap: () {
                                  //           BlocProvider.of<TwoTouchBloc>(
                                  //                   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,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.access_time,
                                    label: "Timer",
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          PageRouteBuilder(
                                              pageBuilder: (context, animation1,
                                                      animation2) =>
                                                  TwoTouchScheduleScreen(
                                                    device: device!,
                                                  )));
                                    },
                                  ),
                                  // 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) =>
                                  //                       TwoTouchScheduleScreen(
                                  //                         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,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.access_time,
                                    label: "Setting",
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          PageRouteBuilder(
                                              pageBuilder: (context, animation1,
                                                      animation2) =>
                                                  TwoTouchSetting(
                                                    device: device,
                                                  )));
                                    },
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.access_time,
                                    label: "All Off",
                                    onTap: () {
                                      BlocProvider.of<TwoTouchBloc>(context)
                                          .add(AllOffEvent());
                                    },
                                  ),

                                ],
                              ),
                            ),
                            Expanded(child: SizedBox())
                          ],
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}
