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/components/general_primary_button.dart';

class OtpAuthScreen extends StatefulWidget {
  final String phoneNumber;

  const OtpAuthScreen({super.key, required this.phoneNumber});

  @override
  State<OtpAuthScreen> createState() => _OtpAuthScreenState();
}

class _OtpAuthScreenState extends State<OtpAuthScreen> {
  late final AuthBloc authBloc;
  late String verificationCode = '';

  @override
  void initState() {
    super.initState();
    authBloc = Injector.appInstance.get<AuthBloc>();
    authBloc.add(AuthEventLoginOAuth(phone: widget.phoneNumber));
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: BlocConsumer<AuthBloc, AuthState>(
        listener: (context, state) {
          if (state is AuthStateSuccess) {
            Navigator.of(context).pop();
          } else if (state is AuthStateVerifyOAuth && state.isWrongCode) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
              content: Text('El Código es incorrecto'),
            ));
          }
        },
        builder: (context, state) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Verificación de código'),
            ),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: MediaQuery.of(context).size.height * 0.1),
                const Text('Te enviaremos un código de verificación a'),
                Text(
                  widget.phoneNumber,
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 20),
                OtpTextField(
                  numberOfFields: 6,
                  borderColor: const Color(0xFF512DA8),
                  showFieldAsBox: true,
                  onCodeChanged: (String code) {
                    verificationCode = code;
                  },
                  onSubmit: (String verificationCode) {
                    authBloc.add(AuthEventVerifyOAuth(code: verificationCode));
                  },
                ),
                Expanded(child: Container()),
                GeneralPrimaryButton(
                  onPressed: () {
                    authBloc.add(AuthEventVerifyOAuth(code: verificationCode));
                  },
                  label: 'Continuar',
                ),
                const SizedBox(height: 20),
              ],
            ),
          );
        },
      ),
    );
  }
}