import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.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/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';

class TimerScreen extends StatelessWidget {
  final DeviceModel device;
  final String deviceCode;
  const TimerScreen({required this.device, required this.deviceCode, super.key});

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle(
        statusBarColor: ColorsManager.primaryColor.withOpacity(0.5),
        statusBarIconBrightness: Brightness.light,
      ),
      child: Scaffold(
        backgroundColor: ColorsManager.backgroundColor,
        extendBodyBehindAppBar: true,
        extendBody: true,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          centerTitle: true,
          title: const BodyLarge(
            text: 'Schedule',
            fontColor: ColorsManager.primaryColor,
            fontWeight: FontsManager.bold,
          ),
        ),
        body: SafeArea(
          child: BlocProvider(
            create: (context) => ThreeGangBloc(threeGangId: device.uuid ?? '')
              ..add(GetCounterEvent(deviceCode: deviceCode)),
            child: BlocBuilder<ThreeGangBloc, ThreeGangState>(
              builder: (context, state) {
                Duration duration = Duration.zero;
                int countNum = 0;
                if (state is UpdateTimerState) {
                  countNum = state.seconds;
                } else if (state is TimerRunInProgress) {
                  countNum = state.remainingTime;
                } else if (state is TimerRunComplete) {
                  countNum = 0;
                } else if (state is LoadingNewSate) {
                  countNum = 0;
                }
                return PopScope(
                    canPop: false,
                    onPopInvoked: (didPop) {
                      if (!didPop) {
                        BlocProvider.of<ThreeGangBloc>(context).add(OnClose());
                        Navigator.pop(context);
                      }
                    },
                    child: Container(
                        width: MediaQuery.sizeOf(context).width,
                        height: MediaQuery.sizeOf(context).height,
                        padding: const EdgeInsets.all(24),
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(
                              Assets.assetsImagesBackground,
                            ),
                            fit: BoxFit.cover,
                            opacity: 0.4,
                          ),
                        ),
                        child: state is LoadingInitialState || state is LoadingNewSate
                            ? const Center(
                                child: DefaultContainer(
                                    width: 50, height: 50, child: CircularProgressIndicator()),
                              )
                            : Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Container(
                                    width: MediaQuery.sizeOf(context).width,
                                    decoration: const ShapeDecoration(
                                      color: ColorsManager.slidingBlueColor,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.all(Radius.circular(20)),
                                      ),
                                    ),
                                    child: CupertinoSlidingSegmentedControl<int>(
                                      thumbColor: ColorsManager.slidingBlueColor,
                                      onValueChanged: (value) {
                                        BlocProvider.of<ThreeGangBloc>(context)
                                            .add(ChangeSlidingSegment(value: value ?? 0));
                                      },
                                      groupValue:
                                          state is ChangeSlidingSegmentState ? state.value : 0,
                                      backgroundColor: Colors.white,
                                      children: <int, Widget>{
                                        0: Container(
                                          padding: const EdgeInsets.symmetric(vertical: 10),
                                          child: BodySmall(
                                            text: 'Countdown',
                                            style: context.bodySmall.copyWith(
                                              color: ColorsManager.blackColor,
                                              fontSize: 12,
                                              fontWeight: FontWeight.w400,
                                            ),
                                          ),
                                        ),
                                        1: Container(
                                          padding: const EdgeInsets.symmetric(vertical: 10),
                                          child: Text(
                                            'Schedule',
                                            style: context.bodySmall.copyWith(
                                              color: ColorsManager.blackColor,
                                              fontSize: 12,
                                              fontWeight: FontWeight.w400,
                                            ),
                                          ),
                                        ),
                                      },
                                    ),
                                  ),
                                  countNum > 0
                                      ? BodyLarge(
                                          text: _formatDuration(countNum),
                                          fontColor: ColorsManager.slidingBlueColor,
                                          fontSize: 40,
                                        )
                                      : CupertinoTimerPicker(
                                          mode: CupertinoTimerPickerMode.hm,
                                          onTimerDurationChanged: (Duration newDuration) {
                                            duration = newDuration;
                                          },
                                        ),
                                  GestureDetector(
                                      onTap: () {
                                        if (state is LoadingNewSate) {
                                          return;
                                        }
                                        if (countNum > 0) {
                                          BlocProvider.of<ThreeGangBloc>(context).add(
                                              SetCounterValue(
                                                  deviceCode: deviceCode, duration: Duration.zero));
                                        } else if (duration != Duration.zero) {
                                          BlocProvider.of<ThreeGangBloc>(context).add(
                                              SetCounterValue(
                                                  deviceCode: deviceCode, duration: duration));
                                        }
                                      },
                                      child: SvgPicture.asset(
                                          countNum > 0 ? Assets.pauseIcon : Assets.playIcon))
                                ],
                              )));
              },
            ),
          ),
        ),
      ),
    );
  }

  String _formatDuration(int seconds) {
    final hours = (seconds ~/ 3600).toString().padLeft(2, '0');
    final minutes = ((seconds % 3600) ~/ 60).toString().padLeft(2, '0');
    final secs = (seconds % 60).toString().padLeft(2, '0');
    return '$hours:$minutes:$secs';
  }
}