import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:krow/core/entity/staff_contact_entity.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_app_bar.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_option_selector.dart';
import 'package:krow/features/clock_manual/domain/bloc/clock_manual_bloc.dart';
import 'package:krow/features/clock_manual/presentation/clock_manual_list_item.dart';

@RoutePage()
class ClockManualScreen extends StatelessWidget implements AutoRouteWrapper {
  final List<StaffContact> staffContacts;

  const ClockManualScreen({
    super.key,
    required this.staffContacts,
  });

  @override
  Widget wrappedRoute(BuildContext context) {
    return BlocProvider(
        create: (context) => ClockManualBloc(staffContacts: staffContacts),
        child: this);
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<ClockManualBloc, ClockManualState>(
      listenWhen: (previous, current) =>
          previous.errorMessage != current.errorMessage,
      listener: (context, state) {
        if (state.errorMessage != null) {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text(state.errorMessage ?? ''),
          ));
        }
      },
      builder: (context, state) {
        var items = state.selectedTabIndex == 0
            ? state.confirmedStaffContacts
            : state.ongoingStaffContacts;
        return Scaffold(
          appBar: KwAppBar(
            titleText: 'Assigned Staff',
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 16, right: 16, top: 16),
                  child: KwOptionSelector(
                      selectedIndex: state.selectedTabIndex,
                      onChanged: (index) {
                        BlocProvider.of<ClockManualBloc>(context)
                            .add(ChangeSelectedTabIndexClockManual(index));
                      },
                      height: 26,
                      selectorHeight: 4,
                      textStyle: AppTextStyles.bodyMediumReg
                          .copyWith(color: AppColors.blackGray),
                      selectedTextStyle: AppTextStyles.bodyMediumMed,
                      itemAlign: Alignment.topCenter,
                      items: const [
                        'Clock In',
                        'Clock Out',
                      ]),
                ),
                ListView.builder(
                  primary: false,
                  shrinkWrap: true,
                  padding: const EdgeInsets.all(16),
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return AssignedStaffManualItemWidget(
                      staffContact: items[index],
                      timer: state.timers[items[index].id]!,
                    );
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
