SubmitOTP

import 'dart:async';
import 'package:flutter/gestures.dart';
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_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: '');

  late Timer _timer;
  int _second = 30;

  void startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = new Timer.periodic(
      oneSec,
      (Timer timer) {
        if (_second == 0) {
          setState(() {
            timer.cancel();
          });
        } else {
          setState(() {
            _second--;
          });
        }
      },
    );
  }

  bool _isValid = false;

  @override
  void initState() {
    startTimer();
    _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,
        ),
      ],
      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,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 18),
                                child: (_second != 0)
                                    ? RichText(
                                        textAlign: TextAlign.center,
                                        text: TextSpan(
                                          text:
                                              'Mohon tunggu dalam ${_second} detik untuk ',
                                          style: GoogleFonts.roboto(
                                            fontSize: 12,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff2D2F2E),
                                          ),
                                          children: <TextSpan>[
                                            TextSpan(
                                                text: 'Kirim Ulang',
                                                style: GoogleFonts.roboto(
                                                  fontSize: 12,
                                                  fontWeight: FontWeight.w400,
                                                  color: Color(0xff2D2F2E),
                                                )),
                                          ],
                                        ),
                                      )
                                    : MultiBlocListener(
                                        listeners: [
                                          BlocListener<
                                              RegisterVerificationEmailBloc,
                                              RegisterVerificationEmailState>(
                                            listener: (context, state) {
                                              if (state.state ==
                                                  RequestState.Loaded) {
                                                Navigator.pop(context);
                                                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) {
                                                Navigator.pop(context);
                                                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: BlocBuilder<
                                            RegisterVerificationEmailBloc,
                                            RegisterVerificationEmailState>(
                                          builder: (context, state) {
                                            return BlocBuilder<
                                                RegisterVerificationPhoneBloc,
                                                RegisterVerificationPhoneState>(
                                              builder: (context, state) {
                                                return RichText(
                                                  textAlign: TextAlign.center,
                                                  text: TextSpan(
                                                    text:
                                                        'Tidak Menerima kode? ',
                                                    style: GoogleFonts.roboto(
                                                      fontSize: 12,
                                                      fontWeight:
                                                          FontWeight.w400,
                                                      color: Color(0xff2D2F2E),
                                                    ),
                                                    children: <TextSpan>[
                                                      TextSpan(
                                                          recognizer:
                                                              TapGestureRecognizer()
                                                                ..onTap = () {
                                                                  _second = 30;
                                                                  startTimer();
                                                                  (type ==
                                                                          'email')
                                                                      ? BlocProvider.of<RegisterVerificationEmailBloc>(
                                                                              context)
                                                                          .add(OnClickRegisterVerificationEmail(
                                                                              c,
                                                                              dEmail))
                                                                      : BlocProvider.of<RegisterVerificationPhoneBloc>(
                                                                              context)
                                                                          .add(OnClickRegisterVerificationPhone(
                                                                              h,
                                                                              dPhone));
                                                                },
                                                          text: 'Kirim Ulang',
                                                          style: GoogleFonts
                                                              .roboto(
                                                            fontSize: 12,
                                                            fontWeight:
                                                                FontWeight.w500,
                                                            color: AppColors
                                                                .grueLight,
                                                          )),
                                                    ],
                                                  ),
                                                );
                                              },
                                            );
                                          },
                                        ),
                                      ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    );
                  }
                },
              );
            }
          },
        ),
      ),
    );
  }

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