import 'package:dog_diary/screens/authentication/signup.dart';
import 'package:dog_diary/screens/home.dart';
import 'package:dog_diary/services/auth_service.dart';
import 'package:flutter/material.dart';
import 'package:dog_diary/widgets/button.dart';
import 'package:dog_diary/widgets/textfield_input.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:dog_diary/utils/global_variables.dart';

class SignIn extends StatefulWidget {
  static const String routeName = '/signin';
  const SignIn({Key? key}) : super(key: key);

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

class _SignInState extends State<SignIn> {
  final AuthService authService = AuthService();
  final _signInFormKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _emailController.dispose();
    _passwordController.dispose();
  }

  void signInUser() {
    authService.signInUser(
      context: context,
      email: _emailController.text,
      password: _passwordController.text,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: GlobalVariables.backgroundColor,
        body: SafeArea(
            top: true,
            bottom: false,
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.only(top: 10.0),
              child: SingleChildScrollView(
                reverse: true,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SvgPicture.asset('assets/images/logo.svg'),
                    Image.asset('assets/images/frenchie@3x.png'),
                    Container(
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(30.0),
                            topRight: Radius.circular(30.0)),
                      ),
                      child: Form(
                          key: _signInFormKey,
                          child: Column(
                            children: [
                              Container(
                                padding:
                                    const EdgeInsets.fromLTRB(20, 10, 20, 5),
                                child: TextFieldInput(
                                  hintText: 'Enter your email',
                                  controller: _emailController,
                                ),
                              ),
                              Container(
                                padding:
                                    const EdgeInsets.fromLTRB(20, 10, 20, 5),
                                child: TextFieldInput(
                                  hintText: 'Enter your password',
                                  controller: _passwordController,
                                  isPass: true,
                                ),
                              ),
                              Container(
                                padding:
                                    const EdgeInsets.fromLTRB(20, 30, 20, 5),
                                child: CustomButton(
                                  text: 'SIGN IN',
                                  onTap: () {
                                    if (_signInFormKey.currentState!
                                        .validate()) {
                                      signInUser();
                                    }
                                  },
                                ),
                              ),
                              Container(
                                  padding:
                                      const EdgeInsets.fromLTRB(20, 20, 20, 35),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Container(
                                        child: const Text(
                                          'NOT YET A MEMBER?',
                                        ),
                                      ),
                                      GestureDetector(
                                        onTap: () =>
                                            Navigator.pushNamedAndRemoveUntil(
                                          context,
                                          SignUp.routeName,
                                          (route) => false,
                                        ),
                                        child: Container(
                                          child: const Text(
                                            ' SIGN UP .',
                                            style: TextStyle(
                                                fontWeight: FontWeight.bold,
                                                color:
                                                    GlobalVariables.mainColor),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ))
                            ],
                          )),
                    )
                  ],
                ),
              ),
            )));
  }
}