import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/device_managment/water_heater/bloc/water_heater_bloc.dart';
import 'package:syncrow_web/pages/device_managment/water_heater/models/water_heater_status_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class BuildScheduleView extends StatelessWidget {
  const BuildScheduleView({super.key, required this.status});

  final WaterHeaterStatusModel status;

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      insetPadding: const EdgeInsets.all(20),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: SizedBox(
        width: 700,
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 20),
            child: BlocBuilder<WaterHeaterBloc, WaterHeaterState>(
              builder: (context, state) {
                if (state is WaterHeaterScheduleViewState) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const SizedBox(),
                          Text(
                            'Scheduling',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 22,
                              color: ColorsManager.dialogBlueTitle,
                            ),
                          ),
                          Container(
                            width: 25,
                            decoration: BoxDecoration(
                              color: Colors.transparent,
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: Colors.grey,
                                width: 1.0,
                              ),
                            ),
                            child: IconButton(
                              padding: EdgeInsets.all(1),
                              icon: const Icon(
                                Icons.close,
                                color: Colors.grey,
                                size: 18,
                              ),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 20),
                      Text(
                        'Type:',
                        style: context.textTheme.bodySmall!.copyWith(
                          fontSize: 13,
                          color: ColorsManager.grayColor,
                        ),
                      ),
                      const SizedBox(
                        height: 4,
                      ),
                      SizedBox(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Flexible(
                              child: ListTile(
                                contentPadding: EdgeInsets.zero,
                                title: Text(
                                  'Countdown',
                                  style: context.textTheme.bodySmall!.copyWith(
                                    fontSize: 13,
                                    color: ColorsManager.blackColor,
                                  ),
                                ),
                                leading: Radio<ScheduleModes>(
                                  value: ScheduleModes.countdown,
                                  groupValue: state.scheduleMode,
                                  onChanged: (ScheduleModes? value) {
                                    if (value != null) {
                                      context
                                          .read<WaterHeaterBloc>()
                                          .add(UpdateScheduleEvent(
                                            scheduleMode: value,
                                            hours: state.hours,
                                            minutes: state.minutes,
                                          ));
                                    }
                                  },
                                ),
                              ),
                            ),
                            Flexible(
                              child: ListTile(
                                contentPadding: EdgeInsets.zero,
                                title: Text(
                                  'Schedule',
                                  style: context.textTheme.bodySmall!.copyWith(
                                    fontSize: 13,
                                    color: ColorsManager.blackColor,
                                  ),
                                ),
                                leading: Radio<ScheduleModes>(
                                  value: ScheduleModes.schedule,
                                  groupValue: state.scheduleMode,
                                  onChanged: (ScheduleModes? value) {
                                    if (value != null) {
                                      context
                                          .read<WaterHeaterBloc>()
                                          .add(UpdateScheduleEvent(
                                            scheduleMode: value,
                                            hours: state.hours,
                                            minutes: state.minutes,
                                          ));
                                    }
                                  },
                                ),
                              ),
                            ),
                            Flexible(
                              child: ListTile(
                                title: Text(
                                  'Circulate',
                                  style: context.textTheme.bodySmall!.copyWith(
                                    fontSize: 13,
                                    color: ColorsManager.blackColor,
                                  ),
                                ),
                                leading: Radio<ScheduleModes>(
                                  value: ScheduleModes.circulate,
                                  groupValue: state.scheduleMode,
                                  onChanged: (ScheduleModes? value) {
                                    if (value != null) {
                                      context
                                          .read<WaterHeaterBloc>()
                                          .add(UpdateScheduleEvent(
                                            scheduleMode: value,
                                            hours: state.hours,
                                            minutes: state.minutes,
                                          ));
                                    }
                                  },
                                ),
                              ),
                            ),
                            Flexible(
                              child: ListTile(
                                title: Text(
                                  'Inching',
                                  style: context.textTheme.bodySmall!.copyWith(
                                    fontSize: 13,
                                    color: ColorsManager.blackColor,
                                  ),
                                ),
                                leading: Radio<ScheduleModes>(
                                  value: ScheduleModes.inching,
                                  groupValue: state.scheduleMode,
                                  onChanged: (ScheduleModes? value) {
                                    if (value != null) {
                                      context
                                          .read<WaterHeaterBloc>()
                                          .add(UpdateScheduleEvent(
                                            scheduleMode: value,
                                            hours: state.hours,
                                            minutes: state.minutes,
                                          ));
                                    }
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 20),
                      if (state.scheduleMode == ScheduleModes.countdown ||
                          state.scheduleMode == ScheduleModes.inching) ...[
                        Text(
                          'Countdown:',
                          style: context.textTheme.bodySmall!.copyWith(
                            fontSize: 13,
                            color: ColorsManager.grayColor,
                          ),
                        ),
                        const SizedBox(height: 4),
                        _hourMinutesWheel(state, context)
                      ],
                      const SizedBox(height: 20),
                      Center(
                        child: SizedBox(
                          width: 400,
                          height: 50,
                          child: Center(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.max,
                              children: [
                                Expanded(
                                  child: DefaultButton(
                                    height: 40,
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    backgroundColor: ColorsManager.boxColor,
                                    child: Text(
                                      'Cancel',
                                      style: context.textTheme.bodyMedium,
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 20),
                                Expanded(
                                  child: (state.countdownRemaining != null &&
                                          state.isActive)
                                      ? DefaultButton(
                                          height: 40,
                                          onPressed: () {
                                            late String code;
                                            if (state.scheduleMode ==
                                                ScheduleModes.countdown) {
                                              code = 'countdown_1';
                                            } else if (state.scheduleMode ==
                                                ScheduleModes.inching) {
                                              code = 'switch_inching';
                                            }
                                            context
                                                .read<WaterHeaterBloc>()
                                                .add(StopScheduleEvent());
                                            context.read<WaterHeaterBloc>().add(
                                                  ToggleWaterHeaterEvent(
                                                    deviceId: status.uuid,
                                                    code: code,
                                                    value: 0,
                                                  ),
                                                );
                                          },
                                          backgroundColor: Colors.red,
                                          child: const Text('Stop'),
                                        )
                                      : DefaultButton(
                                          height: 40,
                                          onPressed: () {
                                            late String code;
                                            if (state.scheduleMode ==
                                                ScheduleModes.countdown) {
                                              code = 'countdown_1';
                                            } else if (state.scheduleMode ==
                                                ScheduleModes.inching) {
                                              code = 'switch_inching';
                                            }
                                            context.read<WaterHeaterBloc>().add(
                                                  ToggleWaterHeaterEvent(
                                                    deviceId: status.uuid,
                                                    code: code,
                                                    // value is time in seconds
                                                    value: Duration(
                                                            hours: state.hours,
                                                            minutes:
                                                                state.minutes)
                                                        .inSeconds,
                                                  ),
                                                );
                                          },
                                          backgroundColor:
                                              ColorsManager.primaryColor,
                                          child: const Text('Save'),
                                        ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }
                return const SizedBox();
              },
            ),
          ),
        ),
      ),
    );
  }

  Row _hourMinutesWheel(
      WaterHeaterScheduleViewState state, BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        // Hours Picker
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 50,
              width: 80,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                color: ColorsManager.boxColor,
                borderRadius: BorderRadius.circular(8),
              ),
              child: ListWheelScrollView.useDelegate(
                controller:
                    FixedExtentScrollController(initialItem: state.hours),
                itemExtent: 40.0,
                physics: FixedExtentScrollPhysics(),
                onSelectedItemChanged: (int value) {
                  context.read<WaterHeaterBloc>().add(
                        UpdateScheduleEvent(
                          scheduleMode: state.scheduleMode,
                          hours: value,
                          minutes: state.minutes,
                        ),
                      );
                },
                childDelegate: ListWheelChildBuilderDelegate(
                  builder: (context, index) {
                    return Center(
                      child: Text(
                        index.toString().padLeft(2, '0'),
                        style: const TextStyle(fontSize: 24),
                      ),
                    );
                  },
                  childCount: 24,
                ),
              ),
            ),
            const SizedBox(height: 8),
            const Text(
              'h',
              style: TextStyle(
                color: ColorsManager.grayColor,
                fontSize: 18,
              ),
            ),
          ],
        ),
        const SizedBox(width: 10),
        // Minutes Picker
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 50,
              width: 80,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                color: ColorsManager.boxColor,
                borderRadius: BorderRadius.circular(8),
              ),
              child: ListWheelScrollView.useDelegate(
                controller:
                    FixedExtentScrollController(initialItem: state.minutes),
                itemExtent: 40.0,
                physics: FixedExtentScrollPhysics(),
                onSelectedItemChanged: (int value) {
                  context.read<WaterHeaterBloc>().add(
                        UpdateScheduleEvent(
                          scheduleMode: state.scheduleMode,
                          hours: state.hours,
                          minutes: value,
                        ),
                      );
                },
                childDelegate: ListWheelChildBuilderDelegate(
                  builder: (context, index) {
                    return Center(
                      child: Text(
                        index.toString().padLeft(2, '0'),
                        style: const TextStyle(fontSize: 24),
                      ),
                    );
                  },
                  childCount: 60,
                ),
              ),
            ),
            const SizedBox(height: 8),
            const Text(
              'm',
              style: TextStyle(
                color: ColorsManager.grayColor,
                fontSize: 18,
              ),
            ),
          ],
        ),
      ],
    );
  }
}