import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:timer_count_down/timer_count_down.dart';


import '../../../core/constants/app_assets.dart';
import '../../../core/constants/translation_keys.dart';
import '../../../custom_widgets/custom_app_bar.dart';
import '../../../custom_widgets/custom_button.dart';
import '../../../res/app_colors.dart';
import '../../../res/app_dimensions.dart';
import '../../login_otp/controllers/o_t_p_screen_controller.dart';
import '../../u_send/controllers/u_send_controller.dart';
import '../controllers/new_beneficiary_otp_controller.dart';

class NewBeneficiaryOtpView extends GetView<NewBeneficiaryOtpController> {
  const NewBeneficiaryOtpView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DashBoardAppBar(
        onBackButtonPressed: () {
          Get.back();
        },
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: AppDimensions.screenHorizontalPadding, vertical: AppDimensions.screenVerticalPadding),
        child: Obx(() {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                TranslationKeys.makeTranslation(TranslationKeys.textOTPDescription),
                style: Theme.of(context).textTheme.bodySmall?.copyWith(height: 1.3),
              ),
              const SizedBox(height: 20),
              // LabelText(TranslationKeys.makeTranslation(TranslationKeys.textOTP)),
              PinCodeTextField(
                autoDisposeControllers: false,
                keyboardType: TextInputType.number,
                controller: controller.pinPutController,
                showCursor: true,
                autoDismissKeyboard: false,
                enablePinAutofill: true,
                length: 6,
                hintCharacter: "0",
                textInputAction: TextInputAction.done,
                appContext: context,
                hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(fontSize: 35, fontWeight: FontWeight.w600, color: AppColors.colorGrey350),
                mainAxisAlignment: MainAxisAlignment.center,
                cursorColor: Colors.black.withOpacity(0.8),
                obscureText: false,
                animationType: AnimationType.fade,
                pinTheme: PinTheme(
                  selectedColor: AppColors.colorGrey350,
                  /*Colors.black.withOpacity(0.6),*/
                  inactiveColor: AppColors.colorGrey350,
                  /*Colors.black.withOpacity(0.6),*/
                  activeColor: AppColors.colorGrey350,
                  fieldOuterPadding: const EdgeInsets.all(5),
                  shape: PinCodeFieldShape.box,
                  borderRadius: BorderRadius.circular(5),
                  fieldHeight: 60,
                  inactiveFillColor: AppColors.white,
                  selectedFillColor: AppColors.white,
                  fieldWidth: 50,
                  activeFillColor: Colors.white,
                ),
                animationDuration: const Duration(milliseconds: 100),
                backgroundColor: Colors.transparent,
                enableActiveFill: true,
                onCompleted: (v) {},
                onChanged: (value) {},
                onSubmitted: (value) {
                  controller.validatePinAndNavigate();
                },
                beforeTextPaste: (text) {
                  return true;
                },
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: AppDimensions.screenVerticalPadding),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text(TranslationKeys.makeTranslation(TranslationKeys.textOTPValid), style: Theme.of(context).textTheme.bodySmall),
                    const SizedBox(width: 10),
                    SvgPicture.asset(AppAssets.ic_clock_circle, height: 15, width: 15),
                    const SizedBox(width: 5),
                    Countdown(
                        controller: controller.countdownController,
                        seconds: 60,
                        build: (_, double time) => Text(
                              getTime(time.toInt()),
                              style: const TextStyle(
                                fontSize: 12,
                              ),
                            ),
                        interval: const Duration(seconds: 1),
                        onFinished: () {
                          controller.updateResend(true);
                        }),
                    const SizedBox(width: 10),
                    InkWell(
                      onTap: () {
                        Get.find<USendController>().sendTransaction(navigate: false);
                      },
                      child: Text(
                        TranslationKeys.makeTranslation(TranslationKeys.textResend),
                        style: Theme.of(context).textTheme.titleSmall?.copyWith(
                              color: controller.isResend.value ? AppColors.colorPrimary : Colors.grey,
                            ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 100),
                child: CustomButton(
                  onPressed: () {
                    controller.validatePinAndNavigate();
                  },
                  buttonText: TranslationKeys.makeTranslation(TranslationKeys.textVerify),
                  buttonColor: AppColors.colorButton,
                  buttonPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 0),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }
}
