import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.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/scroll_layout_helper.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_app_bar.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_button.dart';
import 'package:krow/features/profile/role/domain/bloc/role_bloc.dart';
import 'package:krow/features/profile/role/domain/bloc/role_event.dart';
import 'package:krow/features/profile/role/domain/bloc/role_state.dart';
import 'package:krow/features/profile/role/presentation/widgets/role_card_widget.dart';
import 'package:krow/features/profile/role/presentation/widgets/role_edit_card_widget.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

@RoutePage()
class RoleScreen extends StatelessWidget implements AutoRouteWrapper {
  final bool isInEditMode;

  const RoleScreen({
    super.key,
    this.isInEditMode = true,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KwAppBar(
        titleText: 'role'.tr(),
        centerTitle: true,
      ),
      body: BlocBuilder<RoleBloc, RoleState>(
        builder: (context, state) {
          return ModalProgressHUD(
            inAsyncCall: state.isLoading,
            child: ScrollLayoutHelper(
              upperWidget: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Gap(36),
                   Text('select_u_role'.tr(),
                      style: AppTextStyles.headingH1),
                  const Gap(8),
                  Text(
                      'what_u_area'.tr(),
                      style: AppTextStyles.bodyMediumReg
                          .copyWith(color: AppColors.blackGray)),
                  const SizedBox(height: 12),
                  Column(
                    children: [
                      ...state.staffRoles.indexed.toList().map(
                        (e) {
                          var (index, role) = e;
                          return Container(
                              decoration: KwBoxDecorations.primaryLight12,
                              padding: const EdgeInsets.only(
                                  top: 12, left: 12, right: 12),
                              margin: const EdgeInsets.only(bottom: 12),
                              child: AnimatedSize(
                                  alignment: Alignment.topCenter,
                                  duration: const Duration(milliseconds: 200),
                                  child: state.editedRole == role
                                      ? RoleEditCardWidget(
                                          role: role,
                                          index: index,
                                          skills: state.skills,
                                          mustShowWarningDialog: isInEditMode,
                                          canDelete:
                                              state.staffRoles.length > 1)
                                      : RoleCard(
                                          role: role,
                                          index: index,
                                          canDelete:
                                              state.staffRoles.length > 1)));
                        },
                      ),
                      const Gap(12),
                      if (!state.isLoading)
                        KwButton.outlinedPrimary(
                          label: 'add_role'.tr(),
                          onPressed: () {
                            context.read<RoleBloc>().add(RoleSpawnEvent());
                          },
                        ),
                    ],
                  )
                ],
              ),
              lowerWidget: isInEditMode
                  ? const SizedBox.shrink()
                  : Padding(
                      padding: const EdgeInsets.only(bottom: 20, top: 24),
                      child: KwButton.primary(
                          label: 'save_and_continue'.tr(), onPressed: () {
                        context.router.replace(const SplashRoute());
                      }),
                    ),
            ),
          );
        },
      ),
    );
  }



  @override
  Widget wrappedRoute(BuildContext context) {
    return BlocProvider(
      create: (context) => RoleBloc()..add(RoleFetchEvent()),
      child: this,
    );
  }
}
