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/image/image_view.dart';
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
import 'package:cims_apps/application/component/text_title/text_title.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart';
import 'package:cims_apps/features/auth/registration/view/registration_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

class PhoneNumberView extends StatelessWidget {
  final void Function() nextStep;
  final TextEditingController controller;
  const PhoneNumberView(
      {super.key, required this.nextStep, required this.controller});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => LoginViewModel(),
        builder: (context, child) {
          return Container(
            width: SizeConfig.width,
            height: SizeConfig.height,
            padding: const EdgeInsets.all(24),
            child:
                Consumer<LoginViewModel>(builder: (context, provider, child) {
              return Form(
                key: provider.formKey,
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const TextTitle(
                          title: 'Enter your phone number', fontSize: 24),
                      SizedBox(
                        height: 24,
                      ),
                      TextFormView(
                        name: 'Phone Number',
                        keyboardType: TextInputType.number,
                        ctrl: controller,
                        inputFormatters: [
                          FilteringTextInputFormatter.deny(RegExp(r'^0'))
                        ],
                        contentPadding: EdgeInsets.all(1),
                        prefixIcon: Container(
                            width: SizeConfig.width * .23,
                            padding:
                                const EdgeInsets.symmetric(horizontal: 16.0),
                            margin: const EdgeInsets.only(right: 16, left: 2, top: 2, bottom: 2),
                            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,
                                  ),
                                )
                              ],
                            )),
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Phone number must be filled';
                          } else {
                            return null;
                          }
                        },
                      ),
                      SizedBox(
                        height: 32,
                      ),
                      ButtonView(
                        name: 'Next',
                        heightWrapContent: true,
                        width: SizeConfig.width,
                        marginVertical: 0,
                        contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16, vertical: 12),
                        onPressed: () {
                          if (provider.formKey.currentState!.validate()) {
                            nextStep();
                          }
                        },
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Don't have an account yet?",
                            style: TextStyle(
                              color: ColorPalette.slate500,
                            ),
                          ),
                          TextButton(
                              onPressed: () {
                                routePush(context, page: RegistrationView());
                              },
                              style: TextButton.styleFrom(
                                  padding: EdgeInsets.all(0)),
                              child: Text(
                                'Sign Up',
                                style: TextStyle(
                                    fontWeight: FontWeight.w600,
                                    color: ColorPalette.primary),
                              ))
                        ],
                      ),
                    ],
                  ),
                ),
              );
            }),
          );
        });
  }
}