import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.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 '../controllers/change_transaction_pin_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    String className = runtimeType.toString().split('.').last;
    return Scaffold(
      appBar: DashBoardAppBar(
        title: TranslationKeys.makeTranslation(
          TranslationKeys.textChangeTransactionPin,
        ),
        onBackButtonPressed: () {
          Get.back();
        },
      ),
      body: Padding(
        padding: const EdgeInsets.only(right: 20.0, left: 20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            Text(
              TranslationKeys.makeTranslation(
                  TranslationKeys.textOldTransactionPin),
              style: Theme.of(context)
                  .textTheme
                  .bodyMedium!
                  .copyWith(fontSize: 14, fontWeight: FontWeight.w400),
            ),
            const SizedBox(height: 10),
            PinCodeTextField(
              autoDisposeControllers: false,
              keyboardType: TextInputType.number,
              controller: controller.oldTransactionPinController,
              showCursor: true,
              autoDismissKeyboard: false,
              enablePinAutofill: true,
              textInputAction: TextInputAction.done,
              length: 6,
              hintCharacter: "0",
              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) {},
              beforeTextPaste: (text) {
                return true;
              },
            ),
            const SizedBox(height: 20),
            Text(
              TranslationKeys.makeTranslation(
                  TranslationKeys.textPleaseCreatenewtransactionpin),
              style: Theme.of(context)
                  .textTheme
                  .bodyMedium!
                  .copyWith(fontSize: 14, fontWeight: FontWeight.w400),
            ),
            const SizedBox(height: 10),
            PinCodeTextField(
              autoDisposeControllers: false,
              keyboardType: TextInputType.number,
              controller: controller.confirmTransactionPinController,
              showCursor: true,
              textInputAction: TextInputAction.done,
              autoDismissKeyboard: false,
              enablePinAutofill: true,
              length: 6,
              hintCharacter: "0",
              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.validateAndSendRequest();
              },
              beforeTextPaste: (text) {
                return true;
              },
            ),
            const SizedBox(height: 20),
            Text(
              TranslationKeys.makeTranslation(
                  TranslationKeys.textConfirmTransactionPin),
              style: Theme.of(context)
                  .textTheme
                  .bodyMedium!
                  .copyWith(fontSize: 14, fontWeight: FontWeight.w400),
            ),
            const SizedBox(height: 10),
            PinCodeTextField(
              autoDisposeControllers: false,
              keyboardType: TextInputType.number,
              controller: controller.newTransactionPinController,
              showCursor: true,
              autoDismissKeyboard: false,
              textInputAction: TextInputAction.done,
              enablePinAutofill: true,
              length: 6,
              hintCharacter: "0",
              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.validateAndSendRequest();
              },
              beforeTextPaste: (text) {
                return true;
              },
            ),
          ],
        ),
      ),
      persistentFooterButtons: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: CustomButton(
            onPressed: () {
              controller.validateAndSendRequest();
            },
            buttonText:
                TranslationKeys.makeTranslation(TranslationKeys.textNext),
            buttonColor: AppColors.colorButton,
            buttonPadding:
                const EdgeInsets.symmetric(vertical: 8, horizontal: 0),
          ),
        ),
        // Padding(
        //   padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        //   child: SizedBox(
        //     width: double.infinity,
        //     child: ElevatedButton(
        //       onPressed: () {
        //         controller.validateAndSendRequest();
        //       },
        //       style: ElevatedButton.styleFrom(
        //         backgroundColor: AppColors.colorButton,
        //         shape: RoundedRectangleBorder(
        //           borderRadius: BorderRadius.circular(50),
        //         ),
        //       ),
        //       child: Padding(
        //         padding: const EdgeInsets.all(12.0),
        //         child: Text(TranslationKeys.makeTranslation(TranslationKeys.textNext), style: Theme.of(context).textTheme.labelMedium?.copyWith(color: AppColors.white)),
        //       ),
        //     ),
        //   ),
        // ),
      ],
      persistentFooterAlignment: AlignmentDirectional.bottomCenter,
      resizeToAvoidBottomInset: false,
      backgroundColor: AppColors.colorSecondary,
    );
  }
}
