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/data/models/staff_role.dart';
import 'package:krow/core/presentation/gen/assets.gen.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/ui_kit/kw_app_bar.dart';
import 'package:krow/core/presentation/widgets/scroll_layout_helper.dart';
import 'package:krow/features/profile/role_kit/domain/staff_role_kit_repository_impl.dart';
import 'package:krow/features/profile/role_kit/domain/bloc/role_kit_bloc.dart';
import 'package:krow/features/profile/role_kit/domain/bloc/role_kit_event.dart';
import 'package:krow/features/profile/role_kit/domain/bloc/role_kit_state.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

@RoutePage()
class RolesKitListScreen extends StatefulWidget {

  const RolesKitListScreen({super.key, });

  @override
  State<RolesKitListScreen> createState() => _RolesKitListScreenState();
}

class _RolesKitListScreenState extends State<RolesKitListScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<RoleKitBloc, RoleKitState>(
      builder: (context, state) {
        return Scaffold(
          appBar: KwAppBar(
            titleText: state.roleKitType == RoleKitType.uniform
                ? 'uniform'.tr()
                : 'equipment'.tr(),
          ),
          body: ModalProgressHUD(
            inAsyncCall: state.loading,
            child: ScrollLayoutHelper(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
              upperWidget: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Text(
                      'roles'.tr().toUpperCase(),
                      style: AppTextStyles.captionReg
                          .copyWith(color: AppColors.blackCaptionGreen),
                    ),
                    ...state.roles.map((role) => _buildKitWidget(role,state.roleKitType)),
                    const Gap(24),
                  ]),
              lowerWidget: const SizedBox.shrink(),
            ),
          ),
        );
      },
    );
  }

  Widget _buildKitWidget(StaffRole role, RoleKitType roleKitType ) {
    return GestureDetector(
      onTap: () async{
        context.read<RoleKitBloc>().add(RoleKitEventSelectRole(role: role));
        await context.router.push(const RoleKitRoute());
        context.read<RoleKitBloc>().add(RoleKitEventFetch(type: roleKitType));
      },
      child: Container(
        height: 56,
        padding: const EdgeInsets.all(12),
        margin: const EdgeInsets.only(top: 8),
        decoration: KwBoxDecorations.primaryLight8,
        child: Row(
          children: [
            Expanded(
              child: Text(
                role.skill?.name ?? '',
                style: AppTextStyles.headingH3,
              ),
            ),
            const Gap(16),
            Assets.images.icons.caretRight.svg()
          ],
        ),
      ),
    );
  }
}
