import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_bloc.dart';
import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_event.dart';
import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class RepeatDays extends StatelessWidget {
  const RepeatDays({super.key});

  @override
  Widget build(BuildContext context) {
    final effectiveBloc = context.read<EffectPeriodBloc>();
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('Repeat',
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                color: ColorsManager.textPrimaryColor, fontWeight: FontWeight.w400, fontSize: 14)),
        const SizedBox(width: 8),
        BlocBuilder<EffectPeriodBloc, EffectPeriodState>(
          builder: (context, state) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: effectiveBloc.daysMap.entries.map((entry) {
                    final day = entry.key;
                    final abbreviation = entry.value;
                    final dayIndex = effectiveBloc.getDayIndex(day);
                    final isSelected = state.selectedDaysBinary[dayIndex] == '1';
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 3.0),
                      child: GestureDetector(
                        onTap: () {
                          effectiveBloc.add(ToggleDay(day));
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: isSelected ? Colors.grey : Colors.grey.shade300,
                              width: 1,
                            ),
                          ),
                          child: CircleAvatar(
                            radius: 15,
                            backgroundColor: Colors.white,
                            child: Text(
                              abbreviation,
                              style: TextStyle(
                                fontSize: 16,
                                color: isSelected ? Colors.grey : Colors.grey.shade300,
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
                const SizedBox(
                  height: 8,
                ),
                if (state.selectedDaysBinary == '0000000')
                  Text(
                    'At least one day must be selected',
                    style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                        color: ColorsManager.textPrimaryColor,
                        fontWeight: FontWeight.w400,
                        fontSize: 14),
                  ),
              ],
            );
          },
        ),
      ],
    );
  }
}