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/common/bool_extension.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/data/enums/state_status.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/core/presentation/widgets/ui_kit/kw_loading_overlay.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_option_selector.dart';
import 'package:krow/features/profile/mobility/domain/bloc/mobility_bloc.dart';

@RoutePage()
class MobilityScreen extends StatelessWidget implements AutoRouteWrapper {
  const MobilityScreen({
    super.key,
    this.isInEditMode = true,
  });

  final bool isInEditMode;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KwAppBar(
        titleText: 'mobility'.tr(),
        showNotification: false,
      ),
      body: ScrollLayoutHelper(
        padding: const EdgeInsets.all(16),
        upperWidget: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Gap(4),
             Text(
              'mobility_information'.tr(),
              style: AppTextStyles.headingH1,
              textAlign: TextAlign.start,
            ),
            const Gap(8),
            Text(
              'help_us_understand_mobility'.tr(),
              style: AppTextStyles.bodyMediumReg.copyWith(
                color: AppColors.blackGray,
              ),
              textAlign: TextAlign.start,
            ),
             Padding(
              padding: const EdgeInsets.only(left: 8, bottom: 16, top: 24),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '1. ',
                    style: AppTextStyles.headingH3,
                  ),
                  Expanded(
                    child: Text(
                      'do_you_have_a_car'.tr(),
                      style: AppTextStyles.headingH3,
                    ),
                  )
                ],
              ),
            ),
            BlocSelector<MobilityBloc, MobilityState, bool?>(
              selector: (state) => state.hasACar,
              builder: (context, hasACar) {
                return KwOptionSelector(
                  selectedIndex: hasACar?.toInt(),
                  selectedColor: AppColors.blackDarkBgBody,
                  itemBorder: const Border.fromBorderSide(
                    BorderSide(color: AppColors.grayStroke),
                  ),
                  items:  ['yes'.tr(), 'no'.tr()],
                  onChanged: (index) {
                    context
                        .read<MobilityBloc>()
                        .add(ToggleCarAvailability(index));
                  },
                );
              },
            ),
             Padding(
              padding: const EdgeInsets.only(left: 8, bottom: 16, top: 24),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '2. ',
                    style: AppTextStyles.headingH3,
                  ),
                  Expanded(
                    child: Text(
                      'can_you_relocate'.tr(),
                      style: AppTextStyles.headingH3,
                    ),
                  ),
                ],
              ),
            ),
            BlocSelector<MobilityBloc, MobilityState, bool?>(
              selector: (state) => state.canRelocate,
              builder: (context, canRelocate) {
                return KwOptionSelector(
                  selectedColor: AppColors.blackDarkBgBody,
                  itemBorder: const Border.fromBorderSide(
                    BorderSide(color: AppColors.grayStroke),
                  ),
                  selectedIndex: canRelocate?.toInt(),
                  items: ['yes'.tr(), 'no'.tr()],
                  onChanged: (index) {
                    context
                        .read<MobilityBloc>()
                        .add(ToggleRelocationPossibility(index));
                  },
                );
              },
            ),
            const Gap(90),
          ],
        ),
        lowerWidget: BlocConsumer<MobilityBloc, MobilityState>(
          buildWhen: (previous, current) => previous.status != current.status,
          listenWhen: (previous, current) => previous.status != current.status,
          listener: (context, state) {
            if (state.status == StateStatus.success) {
              if (isInEditMode) {
                Navigator.pop(context);
              } else {
                context.router.push(
                  InclusiveRoute(isInEditMode: false),
                );
              }
            }
          },
          builder: (context, state) {
            return KwLoadingOverlay(
              shouldShowLoading: state.status == StateStatus.loading,
              child: KwButton.primary(
                label: isInEditMode ? 'save_changes'.tr() : 'save_and_continue'.tr(),
                onPressed: () {
                  context.read<MobilityBloc>().add(SaveMobilityChanges());
                },
              ),
            );
          },
        ),
      ),
    );
  }
}
