SendOTPtoEmail

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/pages/register/submit_otp_page.dart';
import 'package:module_core/common/state_enum.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 'package:module_core/utils/app_string.dart';

class SendRegisterOtpPage extends StatelessWidget {
  final RegisterAccessEmailSuccess? dataEmail;
  final RegisterAccessPhoneSuccess? dataPhone;
  const SendRegisterOtpPage(this.dataEmail, this.dataPhone);

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

    return MultiBlocListener(
        listeners: [
          BlocListener<RegisterVerificationEmailBloc,
              RegisterVerificationEmailState>(
            listener: (context, state) {
              if (state.state == RequestState.Loaded) {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => SubmitOtpPage(dataEmail, null),
                ));
              } 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.of(context).push(MaterialPageRoute(
                  builder: (context) => SubmitOtpPage(null, dataPhone),
                ));
              } 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<RegisterVerificationEmailBloc,
              RegisterVerificationEmailState>(
            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<RegisterVerificationPhoneBloc,
                    RegisterVerificationPhoneState>(
                  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: Stack(children: [
                          Positioned(
                              bottom: 0,
                              width: MediaQuery.of(context).size.width,
                              child: Column(
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(top: 20),
                                    height: 2,
                                    decoration: BoxDecoration(
                                      image: DecorationImage(
                                        image: AssetImage(AppImage.footer_line),
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 6),
                                  Text(
                                    'Copyright © 2021 UKUR | All Rights Reserved',
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.roboto(
                                        fontSize: 12,
                                        fontWeight: FontWeight.w400,
                                        color: Color(0xff2D2F2E)),
                                  ),
                                  SizedBox(height: 6),
                                ],
                              )),
                          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(
                                    'Metode Verifikasi',
                                    style: GoogleFonts.roboto(
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                      color: Color(0xff2D2F2E),
                                    ),
                                  ),
                                  SizedBox(height: 8),
                                  Text(
                                    'Anda akan mendapatkan kode',
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.roboto(
                                      fontSize: 12,
                                      fontWeight: FontWeight.w400,
                                      color: Color(0xff2D2F2E),
                                    ),
                                  ),
                                  SizedBox(height: 6),
                                  Text(
                                    type == 'email'
                                        ? 'verifikasi melalui email.'
                                        : 'verifikasi melalui SMS.',
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.roboto(
                                      fontSize: 12,
                                      fontWeight: FontWeight.w400,
                                      color: Color(0xff2D2F2E),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 24),
                                    child: Container(
                                      height: 140,
                                      width: 106,
                                      decoration: BoxDecoration(
                                        image: DecorationImage(
                                          image: AssetImage(AppImage.otp),
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.fromLTRB(30, 24, 30, 20),
                                child: GestureDetector(
                                  onTap: () {
                                    (type == 'email')
                                        ? BlocProvider.of<
                                                    RegisterVerificationEmailBloc>(
                                                context)
                                            .add(
                                                OnClickRegisterVerificationEmail(
                                                    c, dEmail))
                                        : BlocProvider.of<
                                                    RegisterVerificationPhoneBloc>(
                                                context)
                                            .add(
                                                OnClickRegisterVerificationPhone(
                                                    h, dPhone));
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 12, horizontal: 16),
                                    height: 60,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                        border: Border.all(
                                            color: AppColors.orangeLight)),
                                    child: Column(
                                      children: [
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Container(
                                              width: 20,
                                              height:
                                                  (type == 'email') ? 16 : 20,
                                              decoration: BoxDecoration(
                                                image: DecorationImage(
                                                  image: NetworkImage(
                                                      '${AppString.imageIcon}${icon}'),
                                                  fit: BoxFit.cover,
                                                ),
                                              ),
                                            ),
                                            SizedBox(width: 8),
                                            Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  (type == 'email')
                                                      ? 'Melalui email ke'
                                                      : 'Melalui SMS ke',
                                                  style: GoogleFonts.roboto(
                                                    fontSize: 12,
                                                    fontWeight: FontWeight.w400,
                                                    color: Color(0xff505050),
                                                  ),
                                                ),
                                                SizedBox(height: 4),
                                                Text(
                                                  (type == 'email')
                                                      ? (dataEmail
                                                              ?.response
                                                              .verificationMethods?[
                                                                  0]
                                                              .text ??
                                                          'email@email.com')
                                                      : (dataPhone
                                                              ?.response
                                                              .verificationMethods?[
                                                                  0]
                                                              .verificationType ??
                                                          '081234567890'),
                                                  style: GoogleFonts.roboto(
                                                    fontSize: 12,
                                                    fontWeight: FontWeight.w600,
                                                    color: Color(0xff505050),
                                                  ),
                                                )
                                              ],
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ]),
                      );
                    }
                  },
                );
              }
            },
          ),
        ));
  }
}