import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:traderscircuit/Utils/Common/CommonAppbar.dart';
import 'package:traderscircuit/Utils/Common/commonBotton.dart';
import 'package:traderscircuit/Utils/text.dart';
import 'package:traderscircuit/resources/routes/route_name.dart';
import 'package:traderscircuit/view/onBoarding/splashScreen1.dart';
import 'package:traderscircuit/Utils/Dialogs.dart';

class VerifyOTP extends StatefulWidget {
  const VerifyOTP({super.key});

  @override
  State<VerifyOTP> createState() => _VerifyOTPState();
}

class _VerifyOTPState extends State<VerifyOTP> {
  final GlobalKey<FormState> _otpform = GlobalKey<FormState>();
  TextEditingController pincode = TextEditingController();
  Color primaryColor = Colors.transparent.withOpacity(0.2);
  Color secondaryColor = Colors.grey.shade800;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppbar(titleTxt: "Verify OTP"),
      backgroundColor: Colors.black,
      extendBody: true,
      body: Stack(
        children: [
          CommonBlurLeft(),
          CommonBlurRight(),
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                child: Form(
                  key: _otpform,
                  child: ListView(
                    physics: BouncingScrollPhysics(),
                    // mainAxisAlignment: MainAxisAlignment.start,
                    // crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      text18W400("Enter four digit code send to"),
                      SizedBox(
                        height: 100.h,
                      ),
                      Container(
                        child: PinCodeTextField(
                          showCursor: true,
                          cursorColor: Colors.white,
                          textStyle:
                              TextStyle(fontSize: 18.sp, color: Colors.white),
                          errorTextSpace: 22,
                          validator: (value) {
                            if (value != null && value.isEmpty) {
                              return "Please Enter verification code";
                            } else if (value != null && value.length < 4) {
                              return "OTP length should be atleast 4";
                            }
                            return null;
                          },
                          keyboardType: TextInputType.number,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          length: 4,
                          obscureText: false,
                          animationType: AnimationType.fade,
                          pinTheme: PinTheme(
                            selectedFillColor: primaryColor,
                            inactiveFillColor: primaryColor,
                            activeFillColor: primaryColor,
                            inactiveColor: secondaryColor,
                            activeColor: secondaryColor,
                            selectedColor: secondaryColor,
                            shape: PinCodeFieldShape.box,
                            borderRadius: BorderRadius.circular(15),
                            fieldHeight: 60.h,
                            fieldWidth: 60.w,
                          ),
                          animationDuration: Duration(milliseconds: 300),
                          enableActiveFill: true,
                          controller: pincode,
                          onCompleted: (v) {
                            print("Completed");
                          },
                          onChanged: (value) {
                            print(value);
                            setState(() {});
                          },
                          beforeTextPaste: (text) {
                            print("Allowing to paste $text");

                            return true;
                          },
                          appContext: context,
                        ),
                      ),
                      SizedBox(
                        height: 45.h,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          text16W700("Resend Code"),
                        ],
                      ),
                      SizedBox(
                        height: 200.h,
                      ),
                      CommonBtn(
                        text: "Verify OTP",
                        onTap: () {
                          Get.toNamed(RouteName.secureaccess);
                        },
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
