SubmitOTP

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:module_auth/domain/entities/register_access_email_success.dart';
import 'package:module_auth/domain/entities/register_access_phone_success.dart';
import 'package:module_auth/presentation/bloc/register_verification_email_bloc/register_verification_email_bloc.dart';
import 'package:module_auth/presentation/bloc/register_verification_phone_bloc/register_verification_phone_bloc.dart';
import 'package:module_auth/presentation/bloc/register_verify_email_bloc/register_verify_email_bloc.dart';
import 'package:module_auth/presentation/bloc/register_verify_phone/register_verify_phone_bloc.dart';
import 'package:module_auth/presentation/pages/register/complete_register_email_page.dart';
import 'package:module_auth/presentation/widgets/register_resend_otp.dart';
import 'package:module_core/common/state_enum.dart';
import 'package:module_core/common/string_extensions.dart';
import 'package:module_core/custom_widgets/custom_toast/custom_toast.dart';
import 'package:module_core/utils/app_colors.dart';
import 'package:module_core/utils/app_image.dart';

import 'complete_register_phone_page.dart';

class SubmitOtpPage extends StatefulWidget {
  final RegisterAccessEmailSuccess? dataEmail;
  final RegisterAccessPhoneSuccess? dataPhone;
  SubmitOtpPage(this.dataEmail, this.dataPhone);

  @override
  State<SubmitOtpPage> createState() => _SubmitOtpPageState();
}

class _SubmitOtpPageState extends State<SubmitOtpPage> {
  final TextEditingController _fieldController =
      TextEditingController(text: '');

  bool _isValid = false;

  @override
  void initState() {
    _isValid = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final String c = widget.dataEmail?.response.data?.c ?? '';
    final String dEmail = widget.dataEmail?.response.data?.d ?? '';
    final String h = widget.dataPhone?.response.data?.h ?? '';
    final String dPhone = widget.dataPhone?.response.data?.d ?? '';
    final String? type =
        widget.dataEmail?.response.verificationMethods?[0].verificationType;
    final String? email =
        widget.dataEmail?.response.verificationMethods?[0].text ?? '';

    return MultiBlocListener(
      listeners: [
        BlocListener<RegisterVerifyEmailBloc, RegisterVerifyEmailState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) =>
                    CompleteRegisterEmailPage(c: c, d: dEmail, email: email),
              ));
            } else if (state.state == RequestState.Error) {
              CustomToast.ShowCustomWidgetToast('${state.errorMessage}',
                  context: context);
            }
          },
          listenWhen: (previousState, currentState) =>
              currentState.state == RequestState.Loaded ||
              currentState.state == RequestState.Error,
        ),
        BlocListener<RegisterVerifyPhoneBloc, RegisterVerifyPhoneState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) =>
                    CompleteRegisterPhonePage(h: h, d: dPhone, phone: type),
              ));
            } else if (state.state == RequestState.Error) {
              CustomToast.ShowCustomWidgetToast('${state.errorMessage}',
                  context: context);
            }
          },
          listenWhen: (previousState, currentState) =>
              currentState.state == RequestState.Loaded ||
              currentState.state == RequestState.Error,
        ),
        BlocListener<RegisterVerificationEmailBloc,
            RegisterVerificationEmailState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              CustomToast.ShowCustomWidgetToast('OTP Berhasil Dikirim Ulang',
                  context: context);
            } else if (state.state == RequestState.Error) {
              CustomToast.ShowCustomWidgetToast('${state.errorMessage}',
                  context: context);
            }
          },
          listenWhen: (previousState, currentState) =>
              currentState.state == RequestState.Loaded ||
              currentState.state == RequestState.Error,
        ),
        BlocListener<RegisterVerificationPhoneBloc,
            RegisterVerificationPhoneState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              CustomToast.ShowCustomWidgetToast('OTP Berhasil Dikirim Ulang',
                  context: context);
            } else if (state.state == RequestState.Error) {
              CustomToast.ShowCustomWidgetToast('${state.errorMessage}',
                  context: context);
            }
          },
          listenWhen: (previousState, currentState) =>
              currentState.state == RequestState.Loaded ||
              currentState.state == RequestState.Error,
        ),
      ],
      child: Scaffold(
        backgroundColor: Colors.white,
        body: BlocBuilder<RegisterVerifyEmailBloc, RegisterVerifyEmailState>(
          builder: (context, state) {
            if (state.state == RequestState.Loading) {
              return Center(
                  child: Container(
                height: 250,
                width: double.infinity,
                child: Image.asset(AppImage.loadingGif),
              ));
            } else {
              return BlocBuilder<RegisterVerifyPhoneBloc,
                  RegisterVerifyPhoneState>(
                builder: (context, state) {
                  if (state.state == RequestState.Loading) {
                    return Center(
                        child: Container(
                      height: 250,
                      width: double.infinity,
                      child: Image.asset(AppImage.loadingGif),
                    ));
                  } else {
                    return SafeArea(
                      child: ListView(
                        children: [
                          Stack(
                            children: [
                              Container(
                                height: 72,
                                decoration: BoxDecoration(
                                  border: Border(
                                    bottom: BorderSide(
                                        width: 1.0, color: Color(0xffC4C4C4)),
                                  ),
                                  color: Colors.white,
                                ),
                                child: Padding(
                                  padding:
                                      const EdgeInsets.only(left: 30, top: 18),
                                  child: Row(
                                    children: [
                                      GestureDetector(
                                        onTap: () => Navigator.pop(context),
                                        child: Container(
                                          width: 32,
                                          height: 32,
                                          decoration: BoxDecoration(
                                            color: AppColors.greyLight,
                                            borderRadius:
                                                BorderRadius.circular(18),
                                          ),
                                          child: SvgPicture.asset(
                                              AppImage.back_button,
                                              height: 24,
                                              width: 24,
                                              fit: BoxFit.scaleDown),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Center(
                                child: Padding(
                                  padding: const EdgeInsets.only(top: 32),
                                  child: Text(
                                    'Verifikasi',
                                    style: GoogleFonts.poppins(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                      color: Color(0xff2D2F2E),
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 24),
                          Column(
                            children: [
                              Text(
                                'Masukkan Kode Verifikasi',
                                style: GoogleFonts.roboto(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w500,
                                  color: Color(0xff2D2F2E),
                                ),
                              ),
                              SizedBox(height: 8),
                              Text(
                                (type == 'email')
                                    ? 'Kode verifikasi telah dikirim melalui email ke'
                                    : 'Kode verifikasi telah dikirim melalui SMS ke',
                                textAlign: TextAlign.center,
                                style: GoogleFonts.roboto(
                                  fontSize: 12,
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xff2D2F2E),
                                ),
                              ),
                              SizedBox(height: 6),
                              Text(
                                (type == 'email')
                                    ? (widget.dataEmail?.response
                                            .verificationMethods?[0].text ??
                                        'email@email.com')
                                    : (widget
                                            .dataPhone
                                            ?.response
                                            .verificationMethods?[0]
                                            .verificationType ??
                                        '08123456789'),
                                textAlign: TextAlign.center,
                                style: GoogleFonts.roboto(
                                  fontSize: 12,
                                  fontWeight: FontWeight.w500,
                                  color: Color(0xff2D2F2E),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 24),
                                child: Container(
                                  height: 110,
                                  width: 110,
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage(AppImage.submit_otp),
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.symmetric(
                                    horizontal: 54, vertical: 36),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    TextFormField(
                                      textCapitalization:
                                          TextCapitalization.characters,
                                      inputFormatters: [
                                        UpperCaseTextFormatter(),
                                      ],
                                      autofocus: false,
                                      controller: _fieldController,
                                      cursorColor: Colors.black,
                                      textAlign: TextAlign.center,
                                      onChanged: (value) {
                                        if (value.length == 6) {
                                          setState(() {
                                            _isValid = true;
                                          });
                                        } else {
                                          setState(() {
                                            _isValid = false;
                                          });
                                        }
                                      },
                                      style: GoogleFonts.roboto(
                                          fontSize: 16,
                                          color: Color(0xffAEAFB2)),
                                      decoration: InputDecoration(
                                        filled: true,
                                        fillColor:
                                            Color(0xffC6E4EC).withOpacity(0.5),
                                        hintText: 'Kode OTP',
                                        border: OutlineInputBorder(),
                                        focusedBorder: OutlineInputBorder(
                                          borderSide: BorderSide(
                                            color: AppColors.orangeUkur,
                                          ),
                                        ),
                                        enabledBorder: OutlineInputBorder(
                                          borderSide: BorderSide(
                                              color: Color(0xffAEAFB2)
                                                  .withOpacity(0.5)),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(height: 4),
                              Container(
                                width: double.infinity,
                                height: 48,
                                margin: EdgeInsets.symmetric(horizontal: 30),
                                child: TextButton(
                                  onPressed: () {
                                    if (_isValid == true) {
                                      (type == 'email')
                                          ? BlocProvider.of<
                                                      RegisterVerifyEmailBloc>(
                                                  context)
                                              .add(OnClickRegisterVerifyEmail(
                                                  c,
                                                  dEmail,
                                                  _fieldController.text))
                                          : BlocProvider.of<
                                                      RegisterVerifyPhoneBloc>(
                                                  context)
                                              .add(OnClickRegisterVerifyPhone(
                                                  h,
                                                  dPhone,
                                                  _fieldController.text));
                                    }
                                  },
                                  style: TextButton.styleFrom(
                                    backgroundColor: _isValid == true
                                        ? Color(0xffF7B200)
                                        : Colors.grey,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                  ),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Icon(Icons.check_circle_outline,
                                          color: Colors.white, size: 20),
                                      SizedBox(width: 8),
                                      Text(
                                        'VERIFIKASI',
                                        style: GoogleFonts.roboto(
                                          fontSize: 16,
                                          fontWeight: FontWeight.w500,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              RegisterResendOtp(
                                  widget.dataEmail, widget.dataPhone),
                            ],
                          ),
                        ],
                      ),
                    );
                  }
                },
              );
            }
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _fieldController.dispose();
    super.dispose();
  }
}