import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/otp/otp_view.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

class RegistrationView extends StatelessWidget {
  static const routName = '/RegistrationView';
  const RegistrationView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    showOtpWidget() {
      Navigator.of(context).pop();
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        enableDrag: false,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            top: Radius.zero,
          ),
        ),
        builder: (BuildContext context) {
          return Padding(
            padding: EdgeInsets.only(
              top: MediaQueryData.fromView(
                WidgetsBinding.instance.window,
              ).padding.top,
            ),
            child: const OtpView(
              title: 'Sign Up',
              contentTitle: 'Check your SMS',
              contentSubtitle:
                  'Enter 4 digit code We’ve sent to verify your phone number',
            ),
          );
        },
      );
    }

    return ChangeNotifierProvider(
        create: (context) => RegistrationViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar:
                CustomAppBar(height: SizeConfig.height * .1, title: 'Sign Up'),
            body: SingleChildScrollView(
              padding: const EdgeInsets.all(24.0),
              child: Consumer<RegistrationViewModel>(
                  builder: (context, provider, child) {
                return Form(
                  key: provider.formKeyPhone,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const TextCaption(
                        title: 'Enter your phone number',
                        subtitle: 'Input your registered phone number',
                      ),
                      TextFormView(
                        name: 'Phone Number',
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.deny(RegExp(r'^0'))
                        ],
                        contentPadding: EdgeInsets.zero,
                        prefixIcon: Container(
                            width: SizeConfig.width * .23,
                            padding:
                                const EdgeInsets.symmetric(horizontal: 16.0),
                            margin: const EdgeInsets.only(right: 16),
                            decoration: const BoxDecoration(
                                color: ColorPalette.grey,
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(8),
                                  bottomLeft: Radius.circular(8),
                                )),
                            child: const Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                ImageView(
                                  image: PathAssets.iconFlag,
                                  fit: BoxFit.contain,
                                  width: 24,
                                  height: 24,
                                ),
                                Text(
                                  '+62',
                                  style: TextStyle(
                                    fontWeight: FontWeight.w600,
                                    color: ColorPalette.slate800,
                                  ),
                                )
                              ],
                            )),
                        ctrl: provider.phoneNumberCtrl,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Phone number must be filled';
                          } else {
                            return null;
                          }
                        },
                      ),
                      ButtonView(
                        name: 'Next',
                        onPressed: () {
                          if (provider.formKeyPhone.currentState!.validate()) {
                            showOtpWidget();
                          }
                        },
                      ),
                      Align(
                        alignment: Alignment.center,
                        child: RichText(
                          textAlign: TextAlign.center,
                          text: TextSpan(children: [
                            const TextSpan(
                              text: 'Already have an account? ',
                              style: TextStyle(
                                color: Colors.black,
                                decoration: TextDecoration.none,
                              ),
                            ),
                            TextSpan(
                              recognizer: TapGestureRecognizer()..onTap = () {},
                              text: ' Sign In',
                              style: const TextStyle(
                                color: Colors.blue,
                              ),
                            ),
                          ]),
                        ),
                      )
                    ],
                  ),
                );
              }),
            ),
          );
        });
  }
}