import 'package:food_delivery_client/core/helpers/time_formatters.dart';
import 'package:food_delivery_client/feature/auth/domain/usecases/verify_otp_code_login_usecase.dart';
import 'package:food_delivery_client/feature/auth/presentation/blocs/verify_otp_bloc/verify_otp_bloc.dart';
import 'package:food_delivery_client/feature/auth/presentation/widgets/w_auth_background.dart';
import 'package:pinput/pinput.dart';

import '../../../../../food_delivery_client.dart';

class VerifyOtpCodePage extends StatefulWidget {
  const VerifyOtpCodePage({super.key, required this.params});

  final OtpCodePageParams params;

  @override
  State<VerifyOtpCodePage> createState() => _VerifyOtpCodePageState();
}

class _VerifyOtpCodePageState extends State<VerifyOtpCodePage> {
  late TextEditingController _controller;

  @override
  void initState() {
    _controller = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  final defaultPinTheme = PinTheme(
    height: 56,
    width: 56,
    textStyle: AppTextStyles.size18Medium,
    decoration: BoxDecoration(
      borderRadius: AppUtils.kBorderRadius8,
      border: Border.all(color: Color.fromRGBO(234, 239, 243, 1)),
      color: Color.fromRGBO(234, 234, 243, 1),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => sl<VerifyOtpBloc>()..add(VerifyOtpEvent.started()),
      child: BlocConsumer<VerifyOtpBloc, VerifyOtpState>(
        listener: (context, state) {
          if (state.status.isLoaded()) {
            if (widget.params.isRegister) {
              context.push(Routes.register, extra: widget.params.phoneNumber);
            } else {
              context.push(
                Routes.resetPassword,
                extra: widget.params.phoneNumber,
              );
            }
          }
        },
        builder: (context, state) {
          return WLayout(
            top: false,
            child: Scaffold(
              body: WAuthBackground(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    40.verticalSpace,
                    Text(
                      "Enter the 5-digit code sent to you at ${widget.params.phoneNumber}",
                      style: AppTextStyles.size20Medium,
                    ),
                    20.verticalSpace,
                    Pinput(
                      length: 5,
                      enabled: true,
                      controller: _controller,
                      keyboardType: TextInputType.number,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      crossAxisAlignment: CrossAxisAlignment.center,
                      autofocus: true,
                      showCursor: true,
                      defaultPinTheme: defaultPinTheme,

                      focusedPinTheme: defaultPinTheme.copyWith(
                        decoration: defaultPinTheme.decoration!.copyWith(
                          color: Color.fromRGBO(234, 239, 243, 1),
                        ),
                      ),
                      submittedPinTheme: defaultPinTheme.copyWith(
                        decoration: defaultPinTheme.decoration!.copyWith(
                          color: Color.fromRGBO(234, 239, 243, 1),
                        ),
                      ),
                      onChanged: (value) {
                        if (value.length == 5 && state.time > 0) {}
                      },
                    ),
                    10.verticalSpace,
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("You can resend otp after"),

                        if (state.time != 0)
                          Text(TimeFormatters.formatMinutesToTime(state.time)),

                        if (state.time == 0)
                          state.resendStatus.isLoading()
                              ? CircularProgressIndicator.adaptive()
                              : TextButton(
                                  onPressed: () {
                                    if (widget.params.isRegister) {
                                      context.read<VerifyOtpBloc>().add(
                                        VerifyOtpEvent.resendRegister(
                                          widget.params.phoneNumber,
                                        ),
                                      );
                                    } else {
                                      context.read<VerifyOtpBloc>().add(
                                        VerifyOtpEvent.resendForgot(
                                          widget.params.phoneNumber,
                                        ),
                                      );
                                    }
                                  },
                                  child: Text("Resend"),
                                ),
                      ],
                    ),

                    20.verticalSpace,
                    AppButton(
                      name: context.loc.continue_str,
                      onPressed: () {
                        if (_controller.text.trim().length == 5 &&
                            state.time > 0) {
                          if (widget.params.isRegister) {
                            context.read<VerifyOtpBloc>().add(
                              VerifyOtpEvent.verifyOtpRegister(
                                VerifyOtpCodeParams(
                                  phoneNumber: widget.params.phoneNumber,
                                  otpCode: _controller.text.trim().substring(
                                    0,
                                    4,
                                  ),
                                ),
                              ),
                            );
                          } else {
                            context.read<VerifyOtpBloc>().add(
                              VerifyOtpEvent.verifyOtpReset(
                                VerifyOtpCodeParams(
                                  phoneNumber: widget.params.phoneNumber,
                                  otpCode: _controller.text.trim().substring(
                                    0,
                                    4,
                                  ),
                                ),
                              ),
                            );
                          }
                        }
                      },
                      backgroundColor: AppColors.c34A853,
                      borderRadius: 15,
                      trailing: SvgPicture.asset(
                        AppIcons.icArrowRightLight,
                      ).paddingOnly(left: 8),
                    ),
                  ],
                ).paddingSymmetric(horizontal: 16),
              ),
            ),
          );
        },
      ),
    );
  }
}
