import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:injector/injector.dart';
import 'package:prosappco/blocs/auth_bloc/auth_bloc.dart';
import 'package:prosappco/blocs/my_user_bloc/my_user_bloc.dart';
import 'package:prosappco/components/general_primary_button.dart';

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

  @override
  State<ProfileRegisterEmailScreen> createState() =>
      _ProfileRegisterEmailScreenState();
}

class _ProfileRegisterEmailScreenState extends State<ProfileRegisterEmailScreen> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  late final AuthBloc authBloc;
  late String verificationCode;

  @override
  void initState() {
    super.initState();
    authBloc = Injector.appInstance.get<AuthBloc>();
  }

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

  void _showLoginModal(BuildContext context, MyUserState state) {
    final authBlocDialog = Injector.appInstance.get<AuthBloc>();
    final phone = state.user?.phone ?? '';
    authBlocDialog.add(AuthEventLoginOAuth(phone: phone));
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return BlocProvider<AuthBloc>(
            create: (context) => authBlocDialog,
            child: BlocConsumer<AuthBloc, AuthState>(
              listener: (context, state) {
                if (state is AuthStateSuccess) {
                  // here update email and password autentication
                  authBloc.add(
                    AuthEventAddEmailAndPassword(
                      email: _emailController.text,
                      password: _passwordController.text,
                    ),
                  );
                } else if (state is AuthStateVerifyOAuth && state.isWrongCode) {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                    content: Text('El Código es incorrecto'),
                  ));
                }
              },
              builder: (context, state) {
                return AlertDialog(
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const Text(
                        'Te enviaremos un código \n de verificación a',
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 20),
                      Text(
                        phone,
                        style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 20),
                      OtpTextField(
                        numberOfFields: 6,
                        fieldWidth: 35,
                        borderColor: const Color(0xFF512DA8),
                        // showFieldAsBox: true,
                        onCodeChanged: (String code) {
                          verificationCode = code;
                        },
                        onSubmit: (String verificationCode) {
                          authBlocDialog.add(
                              AuthEventVerifyOAuth(code: verificationCode));
                        },
                      ),
                      const SizedBox(height: 30),
                      GeneralPrimaryButton(
                        onPressed: () {
                          authBlocDialog.add(
                              AuthEventVerifyOAuth(code: verificationCode));
                        },
                        label: 'Continuar',
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    //  _showLoginModal(context);
    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: BlocListener<AuthBloc, AuthState>(
        listener: (context, state) {
          if (state is AuthStateSuccess) {
            Navigator.of(context).pop();
          }

          if (state is AuthStateEmailAlreadyInUse) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
              content: Text('El correo ya existe'),
            ));

            Navigator.of(context).pop();
          }
          if (state is AuthStateRequiresRecentLogin) {
            // _showLoginModal(context, state);
          }
        },
        child: BlocBuilder<MyUserBloc, MyUserState>(
          builder: (context, state) {
            if (state.status == MyUserStatus.success) {
              _emailController.text = state.user!.email ?? '';

              return Scaffold(
                appBar: AppBar(
                  title: const Text('Agregar correo'),
                ),
                body: Center(
                  // Centro del contenido
                  child: SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 40, vertical: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          TextFormField(
                            controller: _emailController,
                            decoration: const InputDecoration(
                              labelText: 'Email',
                              prefixIcon: Icon(Icons.email_rounded),
                              hintText: 'Email',
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                Radius.circular(10.0),
                              )),
                              errorBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                              ),
                              focusedErrorBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.red, width: 2.0),
                              ),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Por favor, ingrese su contraseña';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 20),
                          TextFormField(
                            controller: _passwordController,
                            obscureText: true,
                            decoration: const InputDecoration(
                              labelText: 'Contraseña',
                              prefixIcon: Icon(Icons.lock_rounded),
                              hintText: 'Contraseña',
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                Radius.circular(10.0),
                              )),
                              errorBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                              ),
                              focusedErrorBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.red, width: 2.0),
                              ),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Por favor, ingrese su contraseña';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 20),
                          TextFormField(
                            controller: _passwordController,
                            obscureText: true,
                            decoration: const InputDecoration(
                              labelText: 'Confirmar contraseña',
                              prefixIcon: Icon(Icons.lock_rounded),
                              hintText: 'Contraseña',
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                Radius.circular(10.0),
                              )),
                              errorBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                              ),
                              focusedErrorBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.red, width: 2.0),
                              ),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Por favor, ingrese su contraseña';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 30),
                          GeneralPrimaryButton(
                            onPressed: () {
                              if (_emailController.text.isEmpty) {
                                return;
                              }

                              if (_passwordController.text.isEmpty) {
                                return;
                              }
                              _showLoginModal(context, state);
                            },
                            label: 'Guardar',
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}