syncrow-web/lib/pages/routines/widgets/period_option.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_event.dart';
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_state.dart';
import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/effictive_period_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/app_enum.dart';

class PeriodOptions extends StatelessWidget {
  final Future<List<String>?> Function(BuildContext) showCustomTimePicker;

  const PeriodOptions({
    required this.showCustomTimePicker,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<EffectPeriodBloc, EffectPeriodState>(
      builder: (context, state) {
        return Column(
          children: [
            _buildRadioOption(
                context, EnumEffectivePeriodOptions.allDay, '24 Hours'),
            _buildRadioOption(context, EnumEffectivePeriodOptions.daytime,
                'Sunrise to Sunset'),
            _buildRadioOption(
                context, EnumEffectivePeriodOptions.night, 'Sunset to Sunrise'),
            ListTile(
              contentPadding: EdgeInsets.zero,
              onTap: () => showCustomTimePicker(context),
              title: Text(
                'Custom',
                style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                    color: ColorsManager.textPrimaryColor,
                    fontWeight: FontWeight.w400,
                    fontSize: 14),
              ),
              subtitle: state.customStartTime != null &&
                      state.customEndTime != null
                  ? Text(
                      '${"${state.customStartTime}"} - ${"${state.customEndTime}"}',
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                          color: ColorsManager.textPrimaryColor,
                          fontWeight: FontWeight.w400,
                          fontSize: 10),
                    )
                  : Text(
                      '00:00 - 23:59',
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                          color: ColorsManager.textPrimaryColor,
                          fontWeight: FontWeight.w400,
                          fontSize: 10),
                    ),
              trailing: Radio<EnumEffectivePeriodOptions>(
                value: EnumEffectivePeriodOptions.custom,
                groupValue: state.selectedPeriod,
                onChanged: (value) async {
                  if (value != null) {
                    context.read<EffectPeriodBloc>().add(SetPeriod(value));
                  }
                  showCustomTimePicker(context);
                },
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _buildRadioOption(
      BuildContext context, EnumEffectivePeriodOptions value, String subtitle) {
    return BlocBuilder<EffectPeriodBloc, EffectPeriodState>(
      builder: (context, state) {
        return ListTile(
          contentPadding: EdgeInsets.zero,
          onTap: () {
            context.read<EffectPeriodBloc>().add(SetPeriod(value));
          },
          title: Text(
            EffectPeriodHelper.formatEnumValue(value),
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                color: ColorsManager.blackColor,
                fontWeight: FontWeight.w400,
                fontSize: 12),
          ),
          subtitle: Text(
            subtitle,
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                color: ColorsManager.textPrimaryColor,
                fontWeight: FontWeight.w400,
                fontSize: 10),
          ),
          trailing: Radio<EnumEffectivePeriodOptions>(
            value: value,
            groupValue: state.selectedPeriod,
            onChanged: (value) {
              if (value != null) {
                context.read<EffectPeriodBloc>().add(SetPeriod(value));
              }
            },
          ),
        );
      },
    );
  }
}