import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_event.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_state.dart';

import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/three_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/three_touch/schedule_screen.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_touch/three_touch_setting.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 ThreeTouchScreen extends StatelessWidget {
  const ThreeTouchScreen({super.key, this.device});

  final DeviceModel? device;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) =>
          ThreeTouchBloc(switchCode: '', threeTouchId: device?.uuid ?? '')
            ..add(InitialEvent(groupScreen: device != null ? false : true)),
      child: BlocBuilder<ThreeTouchBloc, ThreeTouchState>(
        builder: (context, state) {
          ThreeTouchModel threeTouchModel = ThreeTouchModel(
              light_mode: lightStatus.off,
              relay: status.off,
              relay_status_1: status.off,
              relay_status_2: status.off,
              relay_status_3: status.off,
              firstSwitch: false,
              secondSwitch: false,
              thirdSwitch: false,
              firstCountDown: 0,
              secondCountDown: 0,
              thirdCountDown: 0);

          if (state is LoadingNewSate) {
            threeTouchModel = state.threeTouchModel;
          } else if (state is UpdateState) {
            threeTouchModel = state.threeTouchModel;
          }
          return state is LoadingInitialState
              ? const Center(
                  child: DefaultContainer(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator()),
                )
              : RefreshIndicator(
                  onRefresh: () async {
                    BlocProvider.of<ThreeTouchBloc>(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: threeTouchModel.firstSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeTouchBloc>(context)
                                              .add(ChangeFirstSwitchStatusEvent(
                                                  value: threeTouchModel
                                                      .firstSwitch));
                                        },
                                      ),
                                      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: threeTouchModel.secondSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeTouchBloc>( context) .add(
                                                  ChangeSecondSwitchStatusEvent(
                                                      value: threeTouchModel
                                                          .secondSwitch));
                                        },
                                      ),
                                      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: threeTouchModel.thirdSwitch,
                                        action: () {
                                          BlocProvider.of<ThreeTouchBloc>(
                                                  context)
                                              .add(ChangeThirdSwitchStatusEvent(
                                                  value: threeTouchModel
                                                      .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: [
                                  CircularButton(
                                    device: device,
                                    icons: Icons.u_turn_left,
                                    label: "All On",
                                    onTap: () {
                                      BlocProvider.of<ThreeTouchBloc>(context)
                                          .add(AllOnEvent());
                                    },
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.access_time,
                                    label: "Timer",
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          PageRouteBuilder(
                                              pageBuilder: (context, animation1,
                                                      animation2) =>
                                                  ScheduleScreen(
                                                    device: device!,
                                                  )));
                                    },
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.access_time,
                                    label: "Setting",
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          PageRouteBuilder(
                                              pageBuilder: (context, animation1,
                                                      animation2) =>
                                                  ThreeTouchSetting(
                                                    device: device,
                                                  )));
                                    },
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  CircularButton(
                                    device: device,
                                    icons: Icons.u_turn_left,
                                    label: "All Off",
                                    onTap: () {
                                      BlocProvider.of<ThreeTouchBloc>(context)
                                          .add(AllOffEvent());
                                    },
                                  ),
                                ],
                              ),
                            ),
                            Expanded(child: SizedBox())
                          ],
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}
