import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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 CountdownInchingView extends StatelessWidget {
  final WaterHeaterDeviceStatusLoaded state;

  const CountdownInchingView({
    super.key,
    required this.state,
  });

  @override
  Widget build(BuildContext context) {
    final isCountDown =
        state.scheduleMode?.name == ScheduleModes.countdown.name;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          isCountDown ? 'Countdown:' : 'Inching:',
          style: context.textTheme.bodySmall!.copyWith(
            fontSize: 13,
            color: ColorsManager.grayColor,
          ),
        ),
        const SizedBox(height: 8),
        Visibility(
          visible: !isCountDown,
          child: const Text(
              'Once enabled this feature, each time the device is turned on, it will automatically turn off after a preset time.'),
        ),
        const SizedBox(height: 8),
        _hourMinutesWheel(context, state),
      ],
    );
  }

  Row _hourMinutesWheel(
      BuildContext context, WaterHeaterDeviceStatusLoaded state) {
    final isCountDown =
        state.scheduleMode?.name == ScheduleModes.countdown.name;
    late bool isActive;
    if (isCountDown &&
        state.countdownRemaining != null &&
        state.isCountdownActive == true) {
      isActive = true;
    } else if (!isCountDown &&
        state.countdownRemaining != null &&
        state.isInchingActive == true) {
      isActive = true;
    } else {
      isActive = false;
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _buildPickerColumn(
            context,
            'h',
            isCountDown
                ? (state.countdownHours ?? 0)
                : (state.inchingHours ?? 0),
            24, (value) {
          context.read<WaterHeaterBloc>().add(UpdateScheduleEvent(
                scheduleMode: state.scheduleMode ?? ScheduleModes.countdown,
                hours: value,
                minutes: isCountDown
                    ? (state.countdownMinutes ?? 0)
                    : (state.inchingMinutes ?? 0),
              ));
        }, isActive: isActive),
        const SizedBox(width: 10),
        _buildPickerColumn(
            context,
            'm',
            isCountDown
                ? (state.countdownMinutes ?? 0)
                : (state.inchingMinutes ?? 0),
            60, (value) {
          context.read<WaterHeaterBloc>().add(UpdateScheduleEvent(
                scheduleMode: state.scheduleMode ?? ScheduleModes.countdown,
                hours: isCountDown
                    ? (state.countdownHours ?? 0)
                    : (state.inchingHours ?? 0),
                minutes: value,
              ));
        }, isActive: isActive),
      ],
    );
  }

  Row _hourMinutesSecondWheel(
      BuildContext context, WaterHeaterDeviceStatusLoaded state) {
    final isCountDown =
        state.scheduleMode?.name == ScheduleModes.countdown.name;
    late bool isActive;
    if (isCountDown &&
        state.countdownRemaining != null &&
        state.isCountdownActive == true) {
      isActive = true;
    } else if (!isCountDown &&
        state.countdownRemaining != null &&
        state.isInchingActive == true) {
      isActive = true;
    } else {
      isActive = false;
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _buildPickerColumn(
            context,
            'h',
            isCountDown
                ? (state.countdownHours ?? 0)
                : (state.inchingHours ?? 0),
            24, (value) {
          context.read<WaterHeaterBloc>().add(UpdateScheduleEvent(
                scheduleMode: state.scheduleMode ?? ScheduleModes.countdown,
                hours: value,
                minutes: isCountDown
                    ? (state.countdownMinutes ?? 0)
                    : (state.inchingMinutes ?? 0),
              ));
        }, isActive: isActive),
        const SizedBox(width: 10),
        _buildPickerColumn(
            context,
            'm',
            isCountDown
                ? (state.countdownMinutes ?? 0)
                : (state.inchingMinutes ?? 0),
            60, (value) {
          context.read<WaterHeaterBloc>().add(UpdateScheduleEvent(
                scheduleMode: state.scheduleMode ?? ScheduleModes.countdown,
                hours: isCountDown
                    ? (state.countdownHours ?? 0)
                    : (state.inchingHours ?? 0),
                minutes: value,
              ));
        }, isActive: isActive),
        const SizedBox(width: 10),
        _buildPickerColumn(
            context,
            'S',
            isCountDown
                ? (state.countdownMinutes ?? 0)
                : (state.inchingMinutes ?? 0),
            60, (value) {
          context.read<WaterHeaterBloc>().add(UpdateScheduleEvent(
                scheduleMode: state.scheduleMode ?? ScheduleModes.countdown,
                hours: isCountDown
                    ? (state.countdownHours ?? 0)
                    : (state.inchingHours ?? 0),
                minutes: value,
              ));
        }, isActive: isActive),
      ],
    );
  }

  Widget _buildPickerColumn(
    BuildContext context,
    String label,
    int initialValue,
    int itemCount,
    ValueChanged<int> onSelected, {
    required bool isActive,
  }) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 40,
          width: 80,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            color: ColorsManager.boxColor,
            borderRadius: BorderRadius.circular(8),
          ),
          child: ListWheelScrollView.useDelegate(
            key: ValueKey('$label-$initialValue'),
            controller: FixedExtentScrollController(
              initialItem: initialValue,
            ),
            itemExtent: 40.0,
            physics: const FixedExtentScrollPhysics(),
            onSelectedItemChanged: onSelected,
            childDelegate: ListWheelChildBuilderDelegate(
              builder: (context, index) {
                return Center(
                  child: Text(
                    index.toString().padLeft(2, '0'),
                    style: TextStyle(
                      fontSize: 24,
                      color: isActive ? ColorsManager.grayColor : Colors.black,
                    ),
                  ),
                );
              },
              childCount: itemCount,
            ),
          ),
        ),
        const SizedBox(width: 8),
        Text(
          label,
          style: const TextStyle(
            color: ColorsManager.grayColor,
            fontSize: 18,
          ),
        ),
      ],
    );
  }
}
