car_customer_app/lib/widgets/dialog/otp_dialog.dart

import 'package:car_customer_app/theme/colors.dart';
import 'package:car_customer_app/extensions/int_extensions.dart';
import 'package:car_customer_app/extensions/string_extensions.dart';
import 'package:car_customer_app/generated/locale_keys.g.dart';
import 'package:car_customer_app/widgets/count_down_timer.dart';
import 'package:car_customer_app/widgets/show_fill_button.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';

import '../otp_widget.dart';

class OtpDialog extends StatefulWidget {
  String? userName;
  Function(String) onClick;

  OtpDialog({Key? key, required this.onClick, this.userName}) : super(key: key);

  @override
  State<OtpDialog> createState() => _OtpDialogState();
}

class _OtpDialogState extends State<OtpDialog> {
  String code = "";
  bool hasTimerStopped = false;

  final TextEditingController _pinPutController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(24),
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          LocaleKeys.insert_otp_code.tr().toText(
                height: 23 / 24,
                fontSize: 24,
                letterSpacing: -1.44,
              ),
          8.height,
          LocaleKeys.type_code.tr().toText(color: MyColors.textColor, fontSize: 12),
          if (widget.userName != null)
            (widget.userName ?? "").toText(
              color: MyColors.darkPrimaryColor,
              fontSize: 12,
            ),
          20.height,
          Center(
            child: OTPWidget(
              autoFocus: true,
              controller: _pinPutController,
              defaultBorderColor: const Color(0xffD8D8D8),
              maxLength: 4,
              onTextChanged: (text) {},
              pinBoxColor: Colors.white,
              onDone: (code) => _onOtpCallBack(code, null),
              textBorderColor: MyColors.darkPrimaryColor,
              pinBoxWidth: 48,
              pinBoxHeight: 48,
              pinTextStyle: const TextStyle(fontSize: 24.0, color: MyColors.darkTextColor),
              pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition,
              pinTextAnimatedSwitcherDuration: const Duration(milliseconds: 300),
              pinBoxRadius: 0,
              keyboardType: TextInputType.number,
            ),
          ),
          40.height,
          ShowFillButton(
            title: LocaleKeys.check_code.tr(),
            maxWidth: double.infinity,
            onPressed: () {
              widget.onClick(code);
            },
          ),
          if (!hasTimerStopped)
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(LocaleKeys.time_will_expire.tr() + " "),
                  CountDownTimer(
                    secondsRemaining: 60,
                    whenTimeExpires: () {
                      setState(() {
                        hasTimerStopped = true;
                      });
                    },
                    countDownTimerStyle: const TextStyle(
                      color: Colors.blue,
                      height: 1.2,
                    ),
                  ),
                  Text(" " + LocaleKeys.sec.tr()),
                ],
              ),
            ),
          if (hasTimerStopped)
            InkWell(
              onTap: () {
                setState(() {
                  hasTimerStopped = false;
                });
              },
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Text(
                  LocaleKeys.resend_code.tr(),
                  style: const TextStyle(
                    decoration: TextDecoration.underline,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }

  _onOtpCallBack(String otpCode, bool? isAutofill) {
    if (otpCode.length == 4) {
      // onSuccess(otpCode);
      code = otpCode;
    }
  }
}