import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/models/APiResponse.dart';
import 'package:job_app/services/Auth/reset_password.dart';
import 'package:job_app/widgets/loading_screen.dart';
class CheckEmail extends StatefulWidget {
  const CheckEmail({Key key}) : super(key: key);

  @override
  _CheckEmailState createState() => _CheckEmailState();
}

class _CheckEmailState extends State<CheckEmail> with TickerProviderStateMixin{
  Map data={};
  String email;
  bool isLoading =false;
  TextEditingController field1=TextEditingController();
  TextEditingController field2=TextEditingController();
  TextEditingController field3=TextEditingController();
  TextEditingController field4=TextEditingController();
  GlobalKey<FormState> _globalKey = GlobalKey<FormState>();

  String code;
  @override
  void dispose() {
    field1.dispose();
    field2.dispose();
    field3.dispose();
    field4.dispose();
    super.dispose();
  }
  void initState() {
    super.initState();
  }
  Widget build(BuildContext context) {
    data=ModalRoute.of(context).settings.arguments;
    email=data['email'];
    return GestureDetector(
      onTap: (){
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        backgroundColor: Palette.backgroundColor,
        body: Stack(
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 40),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      children: [
                        Container(
                          width: 130,
                          height: 130,
                          decoration:BoxDecoration(
                            color:Color(0xff005792),
                            borderRadius: BorderRadius.circular(100),
                          ),
                          child: SvgPicture.asset("assets/icons/email.svg",fit: BoxFit.scaleDown,),
                        ),
                        SizedBox(height: 50,),
                        Text("Check in your email",style: TextStyle(
                            fontSize: 22,
                            color: Colors.black,
                            fontFamily: 'MontserratSemiBold'
                        ),),
                        SizedBox(height: 20,),
                        Container(
                          width: 270,
                          child: Text("Please enter the 4 Digit code send to $email",textAlign: TextAlign.center,style: TextStyle(
                            fontSize: 16,
                            color: Colors.black,
                            fontFamily: 'MontserratRegular',
                            fontWeight: FontWeight.bold,
                          ),),
                        )
                      ],
                    ),
                    Column(
                      children: [
                        Form(
                          key: _globalKey,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              digitField(controller: field1),
                              digitField(controller: field2),
                              digitField(controller: field3),
                              digitField(controller: field4),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        TextButton(onPressed: (){},style: ButtonStyle(
                            overlayColor:
                            MaterialStateProperty
                                .resolveWith((states) =>
                            Colors.transparent)), child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.refresh,color: Colors.black,),
                            Text("Resent code",style: TextStyle(
                                fontFamily: "MontserratRegular",
                                fontSize: 15,
                                fontWeight: FontWeight.bold,
                                decoration:
                                TextDecoration.underline,
                                color: Colors.black
                            ),),
                          ],
                        )),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                            decoration: BoxDecoration(
                              color: Palette.primary,
                              borderRadius: BorderRadius.circular(5),
                            ),
                            width: double.maxFinite,
                            child: TextButton(
                                style: ButtonStyle(
                                    overlayColor:
                                    MaterialStateProperty
                                        .resolveWith((states) =>
                                    Colors.transparent)),
                                onPressed: ()async{
                                  code=field1.text+field2.text+field3.text+field4.text;
                                  if(_globalKey.currentState.validate()){
                                    setState(() {
                                      isLoading=true;
                                    });
                                    ResetPasswordService resetPass= ResetPasswordService();
                                    ApiResponseModel response =await resetPass.verifyCode(email, code.toUpperCase());
                                    setState(() {
                                      isLoading=false;
                                    });
                                    if(response.statusCode== 200 || response.statusCode==201){
                                      Navigator.pushNamed(context, '/reset_password',arguments: {
                                        "email" : email,
                                        "reset_code" : code.toUpperCase(),
                                      });
                                    }
                                  }
                                }, child: Text("Verify",style: TextStyle(
                                fontFamily: "MontserratRegular",
                                fontSize: 16,
                                color: Colors.white
                            ),))),

                      ],
                    ),
                  ],
                ),
              ),
            ),
            if(isLoading)
            LoadingScreen(),
          ],
        )
      ),
    );
  }
  Widget digitField({TextEditingController controller}) {

    return Container(
      width: 48,
      height: 48,
      child: TextFormField(
        controller: controller,
        maxLength: 1,
        validator: (val){
          if(val.isEmpty){
            return "";
          }
          return null;
        },
        textCapitalization: TextCapitalization.characters,
        textInputAction: TextInputAction.next,
        cursorColor: Palette.primary,
        decoration: InputDecoration(
          helperStyle: TextStyle(
              fontSize: 0
          ),
          focusedErrorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(0),
              borderSide: BorderSide(color: Colors.red)),
          errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red),
              borderRadius: BorderRadius.circular(0)),
          fillColor: Colors.white,
          filled: true,
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(0),
              borderSide: BorderSide(color: Colors.black)),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(0),
              borderSide: BorderSide(color: Colors.black)),
          contentPadding: EdgeInsets.fromLTRB(15, 0, 0, 0),
        ),

      ),
    );

  }


}