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/components/primary_btn.dart';
import 'package:prosappco/src/controllers/register_controller.dart';
import 'package:prosappco/src/screens/login.dart';
import 'package:responsive_builder/responsive_builder.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 ScreenTypeLayout.builder(
      mobile: (BuildContext context) => _mobileView(context),
      tablet: (BuildContext context) => _mobileView(context),
      desktop: (BuildContext context) => _desktopView(context),
    );
  }

  Widget _mobileView(BuildContext context) {
    bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;

    return SafeArea(
      child: Scaffold(
        backgroundColor: const Color(0xFFD6F4FF),
        body: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: 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(
                        '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: [
                      !isIOS
                          ? 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: const 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),
                                    ],
                                  )),
                            )
                          : const SizedBox(),
                      !isIOS
                          ? const 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,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          : const SizedBox(),
                      Form(
                          key: _formKey,
                          child: Column(
                            children: [
                              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: 18),
                                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: 25),
                                child: TextFormField(
                                  controller: controller.password,
                                  obscureText: _obscureText,
                                  validator: (value) {
                                    if (value == null || value.isEmpty) {
                                      return 'Por favor ingrese una contraseña';
                                    }
                                    if (value.length <= 6) {
                                      return 'Contraseña muy corta';
                                    }
                                    return null;
                                  },
                                  decoration: InputDecoration(
                                    errorBorder: const OutlineInputBorder(
                                        borderSide: BorderSide(
                                            color:
                                                Color.fromARGB(255, 184, 0, 0)),
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(50),
                                        )),
                                    enabledBorder: 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),
                                        )),
                                    focusedBorder: const OutlineInputBorder(
                                        borderSide: BorderSide(
                                            color: Color(0xFFECECEC)),
                                        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: 25),
                        child: Center(
                          child: PrimaryButtom(
                            onPressed: () {
                              if (_formKey.currentState!.validate()) {
                                RegisterController.instance.registerUser(
                                  controller.email.text.trim(),
                                  controller.password.text.trim(),
                                );
                              }
                            },
                            label: 'Registrarme',
                          ),
                        ),
                      ),
                      RichText(
                        text: TextSpan(
                          style: const TextStyle(
                            fontSize: 16.0,
                            color: Color(0xFF65676B),
                            fontFamily: 'Poppins',
                          ),
                          children: [
                            const TextSpan(text: 'Ya estas registrado? '),
                            WidgetSpan(
                              child: GestureDetector(
                                onTap: () {
                                  Navigator.pushReplacementNamed(
                                      context, '/login');
                                },
                                child: const Text(
                                  'Iniciar Sesión',
                                  style: TextStyle(
                                    fontSize: 16.0,
                                    color: Color(0xFF2BA4EC),
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _desktopView(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: const Color(0xFFD6F4FF),
      body: SizedBox(
        height: height,
        width: width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: SizedBox(
                height: height,
                child: const Center(
                  child: Image(
                    image: AssetImage('images/logo_prosapp.png'),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: width * 0.07),
                color: Colors.white,
                height: height,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 20),
                      child: Row(
                        children: <Widget>[
                          IconButton(
                            icon: const Icon(
                              Icons.arrow_back,
                              size: 30,
                            ),
                            onPressed: () {
                              Navigator.pop(context);
                            },
                          ),
                          SizedBox(width: width * 0.01),
                          const 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),
                      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: const 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),
                          //         ],
                          //       )),
                          // ),
                          // const 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('Email',
                                            style: TextStyle(
                                                fontSize: 18.0,
                                                color: Color(0xFF65676B))),
                                      )),
                                  Padding(
                                    padding: const EdgeInsets.only(bottom: 18),
                                    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: 25),
                                    child: TextFormField(
                                      controller: controller.password,
                                      obscureText: _obscureText,
                                      validator: (value) {
                                        if (value == null || value.isEmpty) {
                                          return 'Por favor ingrese una contraseña';
                                        }
                                        if (value.length <= 6) {
                                          return 'Contraseña muy corta';
                                        }
                                        return null;
                                      },
                                      decoration: InputDecoration(
                                        errorBorder: const OutlineInputBorder(
                                            borderSide: BorderSide(
                                                color: Color.fromARGB(
                                                    255, 184, 0, 0)),
                                            borderRadius: BorderRadius.all(
                                              Radius.circular(50),
                                            )),
                                        enabledBorder: 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),
                                            )),
                                        focusedBorder: const OutlineInputBorder(
                                            borderSide: BorderSide(
                                                color: Color(0xFFECECEC)),
                                            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: 25),
                            child: Center(
                              child: PrimaryButtom(
                                onPressed: () {
                                  if (_formKey.currentState!.validate()) {
                                    RegisterController.instance.registerUser(
                                      controller.email.text.trim(),
                                      controller.password.text.trim(),
                                    );
                                  }
                                },
                                label: 'Registrarme',
                              ),
                            ),
                          ),
                          RichText(
                            text: TextSpan(
                              style: const TextStyle(
                                fontSize: 16.0,
                                color: Color(0xFF65676B),
                                fontFamily: 'Poppins',
                              ),
                              children: [
                                const TextSpan(text: 'Ya estas registrado? '),
                                WidgetSpan(
                                  child: GestureDetector(
                                    onTap: () {
                                      Navigator.pushReplacementNamed(
                                          context, '/login');
                                    },
                                    child: const Text(
                                      'Iniciar Sesión',
                                      style: TextStyle(
                                        fontSize: 16.0,
                                        color: Color(0xFF2BA4EC),
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}