import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fluttericon/font_awesome_icons.dart';
import 'package:go_router/go_router.dart';
import 'package:unit2/theme-data.dart/text-styles.dart';
import 'package:unit2/utils/screen_info.dart';
import '../../theme-data.dart/btn-style.dart';
import '../../theme-data.dart/colors.dart';
import '../../theme-data.dart/form-style.dart';
import '../../utils/global.dart';
import '../../utils/text_container.dart';
import '../../utils/validators.dart';
import '../../widgets/wave.dart';

class AddMobile extends StatelessWidget {
  AddMobile({super.key});
  final _formKey = GlobalKey<FormBuilderState>();
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: IconButton(
            icon: const Icon(
              FontAwesome.left_big,
            ),
            onPressed: () {
              context.go(context.namedLocation('login'));
            },
            color: primary,
          ),
        ),
        resizeToAvoidBottomInset: true,
        body: SingleChildScrollView(
          child: SizedBox(
            height: screenHeight * .89,
            child: Stack(
              children: [
                Positioned(
                    bottom: 0,
                    right: 0,
                    child: WaveReverse(height: blockSizeVertical * 8)),
                Container(
                  height: screenHeight,
                  padding: isMobile()
                      ? const EdgeInsets.symmetric(horizontal: 24)
                      : const EdgeInsets.symmetric(horizontal: 60),
                  width: double.infinity,
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(
                            height: isMobile()
                                ? screenHeight * .12
                                : screenHeight * .20),
                        SvgPicture.asset(
                          'assets/svgs/add_mobile.svg',
                          height: isMobile()
                              ? blockSizeVertical * 22
                              : blockSizeVertical * 30,
                          allowDrawingOutsideViewBox: true,
                        ),
                        const SizedBox(
                          height: 24,
                        ),
                        Text(addMobile, style: titleTextStyle()),
                        const SizedBox(
                          height: 8,
                        ),
                        Text(addMobileCaption,
                            textAlign: TextAlign.center,
                            style: Theme.of(context).textTheme.caption),
                        const SizedBox(
                          height: 24,
                        ),
                        FormBuilder(
                            key: _formKey,
                            child: Column(
                              children: [
                                // Mobile number 1
                                FormBuilderTextField(
                                    name: 'mobile1',
                                    validator: mobileNumberValidator,
                                    decoration: normalTextFieldStyle(
                                        "mobile number 1", "+63")),
                                const SizedBox(
                                  height: 12,
                                ),
                                FormBuilderTextField(
                                    name: 'mobile2',
                                    validator: mobileNumberValidator,
                                    decoration: normalTextFieldStyle(
                                        "mobile number 2", "+63")),

                                SizedBox(
                                    height: isMobile()
                                        ? blockSizeVertical * 3
                                        : blockSizeHorizontal * 5),
                                SizedBox(
                                  width: double.infinity,
                                  height: screenHeight * .06,
                                  child: ElevatedButton(
                                    style: secondaryBtnStyle(second,
                                        Colors.transparent, Colors.white54),
                                    child: const Text(
                                      submit,
                                      style: TextStyle(color: Colors.white),
                                    ),
                                    onPressed: () {
                                      context.go(
                                          context.namedLocation('request-sos'));
                                      // if (_formKey.currentState.validate()) {
                                      //   _formKey.currentState.save();
                                      //   BlocProvider.of<UserBloc>(context)
                                      //       .add(UserWebLogin(
                                      //           password: password,
                                      //           username: username));
                                      // }
                                    },
                                  ),
                                ),
                              ],
                            ))
                      ]),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}