import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:prosappco/main.dart';
import 'package:prosappco/src/authentication/authentication_repository.dart';
import 'package:prosappco/src/controllers/register_controller.dart';
import 'package:prosappco/src/screens/login.dart';
import 'package:prosappco/src/screens/welcome.dart';
import 'package:provider/provider.dart';

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

  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  bool _obscureText = true;
  final controller = Get.put(RegisterController());
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xFFD6F4FF),
      body: Stack(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 130),
            width: double.infinity,
            height: 800,
            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: Icon(
                    Icons.arrow_back,
                    size: 30,
                  ),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Text(
                  'Registro',
                  style: TextStyle(
                    color: Color(0xFF262626),
                    fontSize: 38.0,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.right,
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 200, left: 50, right: 50),
            child: Column(children: [
              Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: ElevatedButton(
                    onPressed: () async {
                      await AuthenticationRepository.instance
                          .signInWithGoogle();
                    },
                    style: ElevatedButton.styleFrom(
                      primary: Color(0xFF2BA4EC),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50),
                      ),
                      elevation: 0,
                      minimumSize: Size(230, 60),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'Entrar con Google ',
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                          ),
                        ),
                        SizedBox(width: 5),
                        FaIcon(FontAwesomeIcons.google),
                      ],
                    )),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Divider(
                        color: Colors.black38,
                        thickness: 1,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: Text("ó"),
                    ),
                    Expanded(
                      child: Divider(
                        color: Colors.black38,
                        thickness: 1,
                      ),
                    ),
                  ],
                ),
              ),
              Form(
                  key: _formKey,
                  child: Column(
                    children: [
                      // const Padding(
                      //     padding: EdgeInsets.only(bottom: 5),
                      //     child: Align(
                      //       alignment: Alignment.topLeft,
                      //       child: Text('Nombre',
                      //           style: TextStyle(
                      //               fontSize: 18.0, color: Color(0xFF65676B))),
                      //     )),
                      // Padding(
                      //   padding: EdgeInsets.only(bottom: 18),
                      //   child: TextFormField(
                      //     controller: controller.name,
                      //     decoration: InputDecoration(
                      //         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),
                      //             )),
                      //         hintText: 'Nombre y Apellido',
                      //         fillColor: Color.fromARGB(255, 239, 239, 239),
                      //         filled: true,
                      //         prefixIcon: Icon(Icons.person_outline)),
                      //   ),
                      // ),
                      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: EdgeInsets.only(bottom: 18),
                        child: TextFormField(
                          controller: controller.email,
                          decoration: InputDecoration(
                              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),
                                  )),
                              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: EdgeInsets.only(bottom: 25),
                        child: TextFormField(
                          controller: controller.password,
                          obscureText: _obscureText,
                          decoration: InputDecoration(
                            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),
                                )),
                            hintText: 'Contraseña',
                            fillColor: Color.fromARGB(255, 239, 239, 239),
                            filled: true,
                            prefixIcon: Icon(Icons.lock_outline),
                            suffixIcon: IconButton(
                              icon: Icon(
                                _obscureText
                                    ? Icons.visibility_off
                                    : Icons.visibility,
                                color: Colors.grey,
                              ),
                              onPressed: () {
                                setState(() {
                                  _obscureText = !_obscureText;
                                });
                              },
                            ),
                          ),
                        ),
                      ),
                    ],
                  )),
              Padding(
                padding: const EdgeInsets.only(bottom: 25),
                child: Center(
                    child: ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      RegisterController.instance.registerUser(
                          controller.email.text.trim(),
                          controller.password.text.trim());
                    }
                  },
                  child: Text(
                    'Registrarme',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF2BA4EC),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                    ),
                    elevation: 0,
                    minimumSize: Size(230, 60),
                  ),
                )),
              ),
              RichText(
                text: TextSpan(
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Color(0xFF65676B),
                    fontFamily: 'Poppins',
                  ),
                  children: [
                    TextSpan(text: 'Ya estas registrado? '),
                    WidgetSpan(
                      child: GestureDetector(
                        onTap: () {
                          Navigator.pushReplacementNamed(context, '/login');
                        },
                        child: Text(
                          'Iniciar Sesión',
                          style: TextStyle(
                            fontSize: 16.0,
                            color: Color(0xFF2BA4EC),
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ]),
          ),
        ],
      ),
    ));
  }
}