import 'dart:developer';

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';

class OtpAuthScreen extends StatefulWidget {
  final String phoneNumber;

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

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

class _OtpAuthScreenState extends State<OtpAuthScreen> {
  bool _isRequestSent = false;

  @override
  Widget build(BuildContext context) {
    final authBloc = Injector.appInstance.get<AuthBloc>();

    if (!_isRequestSent) {
      authBloc.add(AuthEventLoginOAuth(phone: widget.phoneNumber));
      _isRequestSent = true;
    }

    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: BlocConsumer<AuthBloc, AuthState>(
        listener: (context, state) {
          if (state is AuthStateSuccess) {
            Navigator.of(context).pop();
          }
          if (state is AuthStateVerifyOAuth) {
            if (state.isWrongCode) {
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                content: Text('El Código es incorrecto'),
              ));
            }
          }
        },
        builder: (context, state) {
          return Scaffold(
            body: Column(children: [
              getContent(state, authBloc: authBloc),
            ]),
          );
        },
      ),
    );
  }

  Widget getContent(AuthState state, {required AuthBloc authBloc}) {
    if (state is AuthStateInitial) {
      return const Text('Inicio');
    } else if (state is AuthStateProcess) {
      return Center(
        child: Column(
          children: [
            Text('${widget.phoneNumber} - $_isRequestSent'),
            OtpTextField(
              numberOfFields: 6,
              borderColor: const Color(0xFF512DA8),
              showFieldAsBox: true,
              onCodeChanged: (String code) {},
              onSubmit: (String verificationCode) {
                authBloc.add(AuthEventVerifyOAuth(code: verificationCode));
              }, // end onSubmit
            ),
          ],
        ),
      );
    } else if (state is AuthStateVerifyOAuth) {
      return Center(
        child: Column(
          children: [
            Text('${widget.phoneNumber} - $_isRequestSent'),
            state.isWrongCode ? const Text('❌') : const Text(''),
            OtpTextField(
              numberOfFields: 6,
              borderColor: const Color(0xFF512DA8),
              showFieldAsBox: true,
              onCodeChanged: (String code) {},
              onSubmit: (String verificationCode) {
                authBloc.add(AuthEventVerifyOAuth(code: verificationCode));
              }, // end onSubmit
            ),
          ],
        ),
      );
    } else if (state is AuthStateSuccess) {
      return const CircularProgressIndicator();
    } else if (state is AuthStateFailure) {
      return const Text('❌');
    } else {
      return const CircularProgressIndicator();
    }
  }
}