import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sms_autofill/sms_autofill.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/loader.dart';
import 'package:tanami_app/shared/components/toast_message.dart';

import '../bloc/otp_bloc.dart';
import '../bloc/otp_event.dart';
import '../bloc/otp_state.dart';

class OtpFillSection extends StatelessWidget {
  final String fromScreen;
  const OtpFillSection({
    super.key,
    required this.fromScreen,
  });

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<OtpBloc, OtpState>(
      listener: (context, state) {
        if (state is OtpSubmitting) {
          FocusScope.of(context).unfocus();
          Loader.loader(context);
        } else if (state is OtpSubmissionSuccess) {
          goRouter.pop();

          successToastMessage(
            context,
            AppText.otpVerifiedSucessfully,
          );

          if (fromScreen == "forgot-password") {
            goRouter.pushNamed(RouteName.forgotPasswordScreen);
          } else if (fromScreen == "withdrawal") {
            goRouter.pushNamed(RouteName.withdrawalConfirmation);
          } else if (fromScreen == "confirm-investment") {
            goRouter.pushNamed(RouteName.walletDetails, pathParameters: {
              "type": 'confirm-investment',
            });
          } else {
            goRouter.pushNamed(RouteName.registerUserDetailsScreen);
          }
        } else if (state is OtpSubmissionFailure) {
          goRouter.pop();
          errorToastMessage(
              context, '${AppText.otpVerifiedFailed} ${state.error}');
        }
      },
      builder: (context, state) {
        final otpBloc = context.read<OtpBloc>();

        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PinFieldAutoFill(
                controller: otpBloc.otpController,
                currentCode: otpBloc.otpController.text,
                decoration: BoxLooseDecoration(
                    textStyle: GoogleFonts.dmSans(
                      fontSize: 22,
                      color: AppColor.otpTextColor,
                      fontWeight: FontWeight.w700,
                    ),
                    bgColorBuilder: const FixedColorBuilder(AppColor.fillColor),
                    radius: const Radius.circular(12),
                    strokeColorBuilder: const FixedColorBuilder(
                      AppColor.strokeColor,
                    )),
                codeLength: 6,
                onCodeChanged: (code) {
                  if (code != null) {
                    otpBloc.otpController.text = code;
                    otpBloc.add(OtpCodeChanged(code));
                  }
                },
                autoFocus: true,
              ),
            ],
          ),
        );
      },
    );
  }
}
