Verify

import 'package:core/core.dart';
import 'package:feature_setting/feature_setting.dart';
import 'package:feature_setting/presentation/pages/verify_email/widgets/user_verify_otp_v2_field_widget.dart';
import 'package:feature_setting/presentation/pages/verify_email/widgets/user_verify_otp_v2_timer_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:sehatindonesiaku/generated/l10n.dart';

class SettingVerifyEmailPage extends StatefulWidget {
  final String email;

  const SettingVerifyEmailPage({super.key, required this.email});

  @override
  State<SettingVerifyEmailPage> createState() => _SettingVerifyEmailPageState();
}

class _SettingVerifyEmailPageState extends State<SettingVerifyEmailPage> {
  String? _otp;

  @override
  void initState() {
    context.read<VerifyEmailBloc>()
      .add(DoInitialEvent(),);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<VerifyEmailBloc, VerifyEmailState>(
        listener: (context, state) async {
      if (state is VerifyEmailErrorState) {
        showAlert(
          context,
          title: state.failure.title ?? S.of(context).title_error_otp_not_match,
          message: state.failure.body ?? S.of(context).msg_error_otp_not_match,
          btnText:
              state.failure.footer ?? S.of(context).btn_error_otp_not_match,
          callback: () {},
        );
      } else if (state is VerifyEmailSuccessState) {
        if (state.isSuccessVerifyOtp == false) {
          showAlert(
            context,
            title: 'Error',
            message: state.message.orEmpty,
            btnText: S.of(context).close,
            callback: () {},
          );
        } else {
          if (state.isTypeEventVerifyOtp == true) {
            //
          } else {
            await showSuccess(context, r'Kode OTP berhasil dikirim.');
          }
        }
      }
    }, builder: (context, state) {
      return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          elevation: 0,
          systemOverlayStyle: appSystemOverlayStyle(),
          backgroundColor: Colors.white,
          centerTitle: true,
          title: Text(
            S.of(context).verification,
            style: const TextStyle(
              color: colorTextPrimary,
              fontWeight: FontWeight.bold,
            ),
          ),
          leading: IconButton(
            icon: const Icon(
              Icons.arrow_back_ios,
              color: Colors.grey,
            ),
            onPressed: () {
              context.router.navigateBack();
            },
          ),
        ),
        body: SafeArea(
          child: Stack(
            children: [
              _buildContentBody(context),
              Visibility(
                  visible: state is VerifyEmailLoadingState,
                  child: centerPageLoading(color: colorBgLoading)),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 16.0),
              child: UserVerifyOTPV2TimerWidget(
                callback: (String value) => _otp = value,
                onRefeshOtp: () {
                  context.read<VerifyEmailBloc>().add(
                        DoResendOtpCodeEvent(widget.email),
                      );
                },
              ),
            ),
            ButtonPrimary(
              textValue: S.of(context).next,
              onTapButton: () {
                if (_otp != null && _otp?.length == 4) {
                  final dataOtp = "$_otp:${widget.email}";
                  context
                      .read<VerifyEmailBloc>()
                      .add(DoVerificationOtpEvent(dataOtp));
                }
              },
            ).horizontalpadded16(),
          ],
        ),
        floatingActionButtonLocation:
            FloatingActionButtonLocation.miniCenterFloat,
      );
    });
  }

  Widget _buildContentBody(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          const Spacer(),
          Padding(
            padding: const EdgeInsets.only(bottom: 24),
            child: RichText(
              text: TextSpan(
                text: r'Masukkan kode keamanan yang dikirim ',
                style: FontFamily.manrope(
                  color: colorMonochromaticBlack100,
                  fontSize: 16,
                  fontWeight: FontWeight.w400,
                  letterSpacing: 0.25,
                ),
                children: <TextSpan>[
                  TextSpan(
                    text: 'ke email ',
                    style: FontFamily.manrope(
                      color: colorMonochromaticBlack100,
                      fontSize: 16,
                      fontWeight: FontWeight.w400,
                      letterSpacing: 0.25,
                    ),
                  ),
                  TextSpan(
                    text: widget.email,
                    style: FontFamily.manrope(
                      color: colorMonochromaticBlack100,
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      letterSpacing: 0.25,
                    ),
                  ),
                ],
              ),
              textAlign: TextAlign.center,
            ),
          ).horizontalPadded(24),
          Padding(
            padding: const EdgeInsets.only(bottom: 24),
            child: UserVerifyOTPV2FieldWidget(
              callback: (String value) => _otp = value,
              onRefeshOtp: () {
                context.read<VerifyEmailBloc>().add(
                      DoResendOtpCodeEvent(widget.email),
                    );
              },
            ),
          ),
          GestureDetector(
            onTap: () {
              context.router.navigateBack();
            },
            child: Text(
              r'Ganti Email',
              style: FontFamily.poppins(
                color: colorPrimary,
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.center,
            ),
          ),
          const Spacer(flex: 4),
        ],
      ),
    );
  }
}