import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../../application/user/change_password_form/change_password_form_bloc.dart';
import '../../../../../common/extension/extension.dart';
import '../../../../../common/theme/theme.dart';
import '../../../../../injection.dart';
import '../../../../components/appbar/appbar.dart';
import '../../../../components/button/button.dart';
import '../../../../components/spacer/spacer.dart';
import '../../../../components/toast/flushbar.dart';
import 'widgets/current_password.dart';
import 'widgets/new_password.dart';

@RoutePage()
class ProfileChangePasswordPage extends StatefulWidget
    implements AutoRouteWrapper {
  const ProfileChangePasswordPage({super.key});

  @override
  State<ProfileChangePasswordPage> createState() =>
      _ProfileChangePasswordPageState();

  @override
  Widget wrappedRoute(BuildContext context) =>
      BlocProvider(create: (_) => getIt<ChangePasswordFormBloc>(), child: this);
}

class _ProfileChangePasswordPageState extends State<ProfileChangePasswordPage> {
  @override
  Widget build(BuildContext context) {
    return BlocListener<ChangePasswordFormBloc, ChangePasswordFormState>(
      listenWhen: (p, c) =>
          p.failureOrChangePasswordOption != c.failureOrChangePasswordOption,
      listener: (context, state) {
        state.failureOrChangePasswordOption.fold(
          () => null,
          (either) => either.fold(
            (f) => AppFlushbar.showUserFailureToast(context, f),
            (user) {
              if (context.mounted) {
                AppFlushbar.showSuccess(context, context.lang.password_changed);
                Future.delayed(const Duration(seconds: 2), () {
                  context.router.back();
                });
              }
            },
          ),
        );
      },
      child: Scaffold(
        backgroundColor: AppColor.background,
        body: CustomScrollView(
          slivers: [
            // SliverAppBar with gradient
            SliverAppBar(
              expandedHeight: 120,
              floating: false,
              pinned: true,
              elevation: 0,
              backgroundColor: AppColor.primary,
              flexibleSpace: CustomAppBar(title: context.lang.change_password),
            ),
            SliverToBoxAdapter(
              child:
                  BlocBuilder<ChangePasswordFormBloc, ChangePasswordFormState>(
                    builder: (context, state) {
                      return Container(
                        margin: EdgeInsets.all(AppValue.margin),
                        padding: EdgeInsets.all(AppValue.padding),
                        decoration: BoxDecoration(
                          color: AppColor.white,
                          borderRadius: BorderRadius.circular(AppValue.radius),
                        ),
                        child: Form(
                          autovalidateMode: state.showErrorMessages
                              ? AutovalidateMode.always
                              : AutovalidateMode.disabled,
                          child: Column(
                            children: [
                              ChangePasswordCurrentPassword(),
                              SpaceHeight(16),
                              ChangePasswordNewPassword(),
                              SpaceHeight(24),
                              AppElevatedButton(
                                text: context.lang.save,
                                isLoading: state.isSubmitting,
                                onPressed: () {
                                  context.read<ChangePasswordFormBloc>().add(
                                    ChangePasswordFormEvent.submitted(),
                                  );
                                },
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
            ),
          ],
        ),
      ),
    );
  }
}
