import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/one_gang_bloc/one_gang_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/one_gang_bloc/one_gang_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/one_gang_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/one_gang/one_gang_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_small.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import '../../../bloc/one_gang_bloc/one_gang_event.dart';

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

  final DeviceModel? device;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) =>
          OneGangBloc(switchCode: 'switch_1', oneGangId: device?.uuid ?? '')
            ..add(const InitialEvent(groupScreen: false)),
      child: BlocBuilder<OneGangBloc, OneGangState>(
        builder: (context, state) {
          OneGangModel oneGangModel = OneGangModel(
            firstSwitch: false,
            firstCountDown: 0,
          );

          if (state is LoadingNewSate) {
            oneGangModel = state.oneGangModel;
          } else if (state is UpdateState) {
            oneGangModel = state.oneGangModel;
          }
          return state is LoadingInitialState
              ? const Center(
                  child: DefaultContainer(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator()),
                )
              : RefreshIndicator(
                  onRefresh: () async {
                    BlocProvider.of<OneGangBloc>(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: oneGangModel.firstSwitch,
                                        action: () {
                                          BlocProvider.of<OneGangBloc>(context)
                                              .add(ChangeFirstSwitchStatusEvent(
                                                  value: oneGangModel
                                                      .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: [
                                  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) =>
                                                        TimerScheduleScreen(
                                                          switchCode:
                                                              'switch_1',
                                                          device: device!,
                                                          deviceCode:
                                                              'countdown_1',
                                                        )));
                                          },
                                          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,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Expanded(child: SizedBox())
                          ],
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}
