import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:prosappco/src/authentication/authentication_repository.dart';
import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/controllers/login_email_controller.dart';

class LoginEmailScreen extends StatefulWidget {
  const LoginEmailScreen({super.key});

  @override
  State<LoginEmailScreen> createState() => _LoginEmailScreenState();
}

class _LoginEmailScreenState extends State<LoginEmailScreen> {
  bool _obscureText = true;
  final controller = Get.put(LoginEmailController());
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: const Color(0xFFD6F4FF),
      body: SingleChildScrollView(
        reverse: true,
        child: Stack(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 130),
              width: double.infinity,
              height: 700,
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(50),
                      topLeft: Radius.circular(50))),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20, left: 30),
              child: const Image(
                image: AssetImage('images/logo_prosapp.png'),
                width: 180,
                height: 100,
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
              margin: const EdgeInsets.only(
                top: 125,
                left: 25,
              ),
              child: Row(
                children: <Widget>[
                  IconButton(
                    icon: const Icon(
                      Icons.arrow_back,
                      size: 30,
                    ),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                  const Text(
                    'Iniciar sesión',
                    style: TextStyle(
                      color: Color(0xFF262626),
                      fontSize: 38.0,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.right,
                  ),
                ],
              ),
            ),
            Form(
              key: _formKey,
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
                margin: const EdgeInsets.only(top: 210, left: 50, right: 50),
                child: Column(children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20),
                    child: ElevatedButton(
                        onPressed: () async {
                          await AuthenticationRepository.instance
                              .signInWithGoogle();
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF2BA4EC),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(50),
                          ),
                          elevation: 0,
                          minimumSize: const Size(230, 60),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Text(
                              'Entrar con Google ',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 18,
                              ),
                            ),
                            SizedBox(width: 5),
                            FaIcon(FontAwesomeIcons.google),
                          ],
                        )),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Row(
                      children: const [
                        Expanded(
                          child: Divider(
                            color: Colors.black38,
                            thickness: 1,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10),
                          child: Text("ó"),
                        ),
                        Expanded(
                          child: Divider(
                            color: Colors.black38,
                            thickness: 1,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const Padding(
                      padding: EdgeInsets.only(bottom: 5),
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Text('Email',
                            style: TextStyle(
                                fontSize: 18.0, color: Color(0xFF65676B))),
                      )),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20),
                    child: TextFormField(
                      controller: controller.email,
                      validator: (String? value) {
                        if (value == null || value.isEmpty) {
                          return 'Por favor ingrese un email';
                        }
                        final RegExp emailRegExp =
                            RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
                        if (!emailRegExp.hasMatch(value)) {
                          return 'Por favor ingrese un email válido';
                        }
                        return null;
                      },
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                color: Color.fromARGB(255, 184, 0, 0)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        hintText: 'Hello@gmail.com',
                        fillColor: Color.fromARGB(255, 239, 239, 239),
                        filled: true,
                        prefixIcon: Icon(Icons.email_outlined),
                      ),
                    ),
                  ),
                  const Padding(
                      padding: EdgeInsets.only(bottom: 5),
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Text('Password',
                            style: TextStyle(
                                fontSize: 18.0, color: Color(0xFF65676B))),
                      )),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 50),
                    child: TextFormField(
                      controller: controller.password,
                      obscureText: _obscureText,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'Por favor ingrese una contraseña';
                        }
                        return null;
                      },
                      decoration: InputDecoration(
                        enabledBorder: const OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        focusedBorder: const OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        border: const OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFECECEC)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        errorBorder: const OutlineInputBorder(
                            borderSide: BorderSide(
                                color: Color.fromARGB(255, 184, 0, 0)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(50),
                            )),
                        hintText: 'Contraseña',
                        fillColor: const Color.fromARGB(255, 239, 239, 239),
                        filled: true,
                        prefixIcon: const Icon(Icons.lock_outline),
                        suffixIcon: IconButton(
                          icon: Icon(
                            _obscureText
                                ? Icons.visibility
                                : Icons.visibility_off,
                            color: Colors.grey,
                          ),
                          onPressed: () {
                            setState(() {
                              _obscureText = !_obscureText;
                            });
                          },
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 40),
                    child: Center(
                      child: PrimaryButtom(
                          onPressed: () {
                            if (_formKey.currentState!.validate()) {
                              LoginEmailController.instance.loginUser(
                                controller.email.text.trim(),
                                controller.password.text.trim(),
                              );
                            }
                          },
                          label: 'Iniciar'),
                    ),
                  ),
                  RichText(
                    text: TextSpan(
                      style: const TextStyle(
                        fontSize: 16.0,
                        color: Color(0xFF65676B),
                        fontFamily: 'Poppins',
                      ),
                      children: [
                        const TextSpan(text: 'No estas registrado? '),
                        WidgetSpan(
                          child: GestureDetector(
                            onTap: () {
                              Navigator.pushReplacementNamed(
                                  context, '/register');
                            },
                            child: const Text(
                              'Registrarse',
                              style: TextStyle(
                                fontSize: 16.0,
                                color: Color(0xFF2BA4EC),
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ]),
              ),
            ),
          ],
        ),
      ),
    ));
  }
}
