import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/services.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:intl_phone_field/intl_phone_field.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_input_decoration.dart';
import 'package:prosappco/components/general_primary_button.dart';

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

  @override
  State<ProfileRegisterPhoneScreen> createState() =>
      _ProfileRegisterPhoneScreenState();
}

class _ProfileRegisterPhoneScreenState
    extends State<ProfileRegisterPhoneScreen> {
  late final AuthBloc authBloc;
  late String verificationCode;

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

  @override
  void 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(
                        'Requiere autenticación porfavor ingresa tu contraseña',
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 20),
                      Text(
                        phone,
                        style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 20),
                      GeneralPrimaryButton(
                        onPressed: () {
                          // authBlocDialog.add(AuthEventVerifyOAuth(code: verificationCode));
                        },
                        label: 'Continuar',
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        });
  }

  String? _phoneNumber;
  String? _errorMsg;
  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: BlocConsumer<AuthBloc, AuthState>(
        listener: (context, state) {},
        builder: (context, state) {
          return BlocBuilder<MyUserBloc, MyUserState>(
            builder: (context, stateUser) {
              if (stateUser.status == MyUserStatus.success) {
                return Scaffold(
                  appBar: AppBar(
                    title: const Text('Agregar celular'),
                  ),
                  body: Center(
                    child: SingleChildScrollView(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 40, vertical: 10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ...switchContent(context, state),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          );
        },
      ),
    );
  }

  switchContent(
    BuildContext context,
    AuthState state,
  ) {
    if (state is AuthStateInitial) {
      return getContent(context);
    }

    if (state is AuthStateVerifyOAuth) {
      return [
        OtpTextField(
          numberOfFields: 6,
          fieldWidth: 35,
          borderColor: const Color(0xFF512DA8),
          showFieldAsBox: true,
          onCodeChanged: (String code) {
            verificationCode = code;
          },
          onSubmit: (String verificationCode) {
            authBloc.add(LinkWithPhoneNumberOtp(
                phoneNumber: _phoneNumber!, code: verificationCode));
          },
        ),
      ];
    }

    if (state is AuthStateSuccess) {
      return [
        const Text('Tu celular ha sido agregado'),
      ];
    }

    if (state is AuthStateFailure) {
      return [
        Text(state.message ?? "Error inesperado. 🥸"),
      ];
    }

    return [
      const CircularProgressIndicator(),
    ];
  }

  getContent(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return [
      SizedBox(
        width: double.infinity,
        child: Text(
          'Numero de celular',
          style: TextStyle(
            fontSize: width * 0.045,
            color: Theme.of(context).colorScheme.onBackground,
          ),
        ),
      ),
      IntlPhoneField(
        initialCountryCode: 'CO',
        keyboardType: TextInputType.number,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        validator: (value) {
          if (value == null) {
            return 'Ingresa un numero';
          } else {
            return null;
          }
        },
        onChanged: (phone) {
          _phoneNumber = phone.completeNumber;
          log('xd ${_phoneNumber!}');
        },
        decoration: GeneralInputDecoration.getCustomDecoration(
          context: context,
          hintText: 'Ingresa tu numero',
          errorMsg: _errorMsg,
        ),
      ),
      const SizedBox(height: 10),
      // TextFormField(
      //   controller: _actualPasswordController,
      //   obscureText: true,
      //   decoration: const InputDecoration(
      //     labelText: 'Contraseña actual',
      //     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: 15),
      Center(
        child: Text(
          'Un código será enviado a este numero de celular.',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 13.0,
            color: Theme.of(context).colorScheme.onBackground,
          ),
        ),
      ),
      const SizedBox(height: 10),
      Center(
        child: GeneralPrimaryButton(
          onPressed: () async {
            final phoneNumber = _phoneNumber;

            if (phoneNumber == null || phoneNumber.isEmpty) {
              ScaffoldMessenger.of(context).clearSnackBars();
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                content: Text('Por favor, ingresa un numero'),
              ));
              return;
            }

            authBloc.add(LinkWithPhoneNumber(
              phoneNumber: phoneNumber,
            ));
          },
          label: 'Enviar código',
        ),
      ),
    ];
  }
}