RegisterPage

import 'package:email_validator/email_validator.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/presentation/bloc/register_access_email_bloc/register_access_email_bloc.dart';
import 'package:module_auth/presentation/bloc/register_access_phone_bloc/register_access_phone_bloc.dart';
import 'package:module_auth/presentation/pages/forgot_password/forgot_password_access_page.dart';
import 'package:module_auth/presentation/pages/register/send_register_otp_page.dart';
import 'package:module_core/common/state_enum.dart';
import 'package:module_core/custom_widgets/custom_button/custom_button.dart';
import 'package:module_core/custom_widgets/custom_dialog_register/custom_dialog_register.dart';
import 'package:module_core/custom_widgets/custom_textfield/custom_textfield.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';

class RegisterPage extends StatefulWidget {
  RegisterPage({Key? key}) : super(key: key);

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

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

  bool _isValid = false;

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

  @override
  Widget build(BuildContext context) {
    return MultiBlocListener(
      listeners: [
        BlocListener<RegisterAccessEmailBloc, RegisterAccessEmailState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => SendRegisterOtpPage(state.data, 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<RegisterAccessPhoneBloc, RegisterAccessPhoneState>(
          listener: (context, state) {
            if (state.state == RequestState.Loaded) {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => SendRegisterOtpPage(null, state.data),
              ));
            } 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(body:
          BlocBuilder<RegisterAccessEmailBloc, RegisterAccessEmailState>(
              builder: (context, state) {
        return BlocBuilder<RegisterAccessPhoneBloc, RegisterAccessPhoneState>(
            builder: (context, state) {
          return SafeArea(
              child: ListView(children: [
            Padding(
              padding: const EdgeInsets.only(left: 30, top: 30),
              child: Row(
                children: [
                  GestureDetector(
                    onTap: () => print('Back'),
                    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),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30),
              child: AspectRatio(
                aspectRatio: 3 / 2,
                child: Container(
                  height: 196,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(AppImage.register_image),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Buat Akunmu Sekarang',
                  style: GoogleFonts.poppins(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Color(0xff2D2F2E),
                  ),
                ),
              ],
            ),
            SizedBox(height: 6),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Sudah Punya Akun?',
                  style: GoogleFonts.roboto(
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: Color(0xff2D2F2E),
                  ),
                ),
                SizedBox(width: 2),
                GestureDetector(
                  onTap: () => print('Masuk'),
                  child: Text(
                    'Masuk',
                    style: GoogleFonts.roboto(
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                      color: Color(0xff2D2F2E),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 18),
            Divider(
              color: Color(0xffC4C4C4),
              thickness: 1,
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(30, 18, 30, 0),
              child: CustomTextField(
                title: 'Nomor Handphone atau Email anda',
                hintText: 'Nomor Handphone atau Email anda',
                controller: _fieldController,
                onChanged: (value) {
                  if ((EmailValidator.validate(value) ||
                          isValidPhoneNumber(value)) &&
                      value.length > 9) {
                    setState(() {
                      _isValid = true;
                    });
                  } else {
                    setState(() {
                      _isValid = false;
                    });
                  }
                  print(_isValid);
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 42),
              child: Text('Contoh: account@email.com',
                  style: GoogleFonts.roboto(
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      color: Color(0xff505050))),
            ),
            Padding(
                padding: const EdgeInsets.fromLTRB(30, 18, 30, 0),
                child: CustomButton(
                    title: 'Daftar',
                    color: _isValid == true
                        ? AppColors.grueLight
                        : AppColors.greyLight,
                    onPressed: () {
                      if (_isValid == true) {
                        showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return CustomDialogRegister(
                                title: (EmailValidator.validate(
                                        _fieldController.text))
                                    ? _fieldController.text
                                    : isValidPhoneNumber(_fieldController.text)
                                        ? _fieldController.text
                                        : _fieldController.text,
                                descriptions: (EmailValidator.validate(
                                        _fieldController.text))
                                    ? 'Apakah email yang anda masukkan sudah benar?'
                                    : isValidPhoneNumber(_fieldController.text)
                                        ? 'Apakah nomor telepon yang anda masukkan sudah benar?'
                                        : 'Apakah Anda Manusia ?',
                                textYes: 'Ya, benar',
                                textNo: "Ubah",
                                onPressedYes: () {
                                  if (EmailValidator.validate(
                                      _fieldController.text)) {
                                    BlocProvider.of<RegisterAccessEmailBloc>(
                                            context)
                                        .add(OnClickRegisterAccessEmail(
                                            _fieldController.text));
                                    Navigator.pop(context);
                                  } else if (isValidPhoneNumber(
                                      _fieldController.text)) {
                                    BlocProvider.of<RegisterAccessPhoneBloc>(
                                            context)
                                        .add(OnClickRegisterAccess(
                                            _fieldController.text));
                                    Navigator.pop(context);
                                  } else {
                                    print('Invalid Email Or Phone Number');
                                  }
                                },
                                onPressedNo: () {
                                  Navigator.pop(context);
                                },
                                image: (EmailValidator.validate(
                                        _fieldController.text))
                                    ? AppImage.register_email
                                    : isValidPhoneNumber(_fieldController.text)
                                        ? AppImage.register_phone
                                        : AppImage.register_email,
                              );
                            });
                      }
                    })),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
              child: RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                  text: 'Dengan mendaftar, saya menyetujui ',
                  style: GoogleFonts.roboto(
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: Color(0xff2D2F2E),
                  ),
                  children: <TextSpan>[
                    TextSpan(
                        text: 'Syarat dan ketentuan ',
                        style: GoogleFonts.roboto(
                          fontSize: 12,
                          fontWeight: FontWeight.w500,
                          color: Color(0xff2D2F2E),
                        )),
                    TextSpan(
                      text: ' yang berlaku di sistem kami',
                      style: GoogleFonts.roboto(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        color: Color(0xff2D2F2E),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(30, 10, 30, 20),
              child: IntrinsicHeight(
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(right: 10),
                        height: 1,
                        color: Color(0xffC4C4C4),
                      ),
                    ),
                    Text(
                      'atau daftar dengan metode lain',
                      style: GoogleFonts.roboto(
                        fontSize: 10,
                        fontWeight: FontWeight.w400,
                        color: Color(0xff2D2F2E),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        height: 1,
                        margin: EdgeInsets.only(left: 10),
                        color: Color(0xffC4C4C4),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 30),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {
                        showModalBottomSheet(
                            context: context,
                            isScrollControlled: true,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.vertical(
                                    top: Radius.circular(24.0))),
                            builder: (context) {
                              return AnimatedPadding(
                                padding: MediaQuery.of(context).viewInsets,
                                duration: Duration(milliseconds: 100),
                                child: ForgotPasswordAccessPage(),
                              );
                            });
                      },
                      child: Container(
                        height: 40,
                        width: MediaQuery.of(context).size.width / 2 - 40,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Color(0xffFEFEFE),
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.black12,
                                  blurRadius: 4,
                                  spreadRadius: 1,
                                  offset: Offset(4, 4)) // Shadow ),
                            ]),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 24, vertical: 12),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              SvgPicture.asset(AppImage.google,
                                  height: 24, width: 24, fit: BoxFit.scaleDown),
                              SizedBox(width: 8),
                              Text(
                                'Google',
                                style: GoogleFonts.roboto(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w500,
                                  color: Color(0xff2D2F2E),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 40,
                      width: MediaQuery.of(context).size.width / 2 - 40,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Color(0xff395185),
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black12,
                                blurRadius: 4,
                                spreadRadius: 1,
                                offset: Offset(4, 4)) // Shadow ),
                          ]),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 12),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SvgPicture.asset(AppImage.facebook,
                                height: 30, width: 30, fit: BoxFit.scaleDown),
                            SizedBox(width: 8),
                            Text(
                              'Facebook',
                              style: GoogleFonts.roboto(
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                                color: Color(0xffFEFEFE),
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ]),
            )
          ]));
        });
      })),
    );
  }

  bool isValidPhoneNumber(String? string) {
    if (string == null || string.isEmpty || string.length < 10) {
      return false;
    }

    const pattern = r'^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$';
    final regExp = RegExp(pattern);

    if (!regExp.hasMatch(string)) {
      return false;
    }
    return true;
  }
}