import 'package:flutter/material.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';

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

  @override
  State<Pin> createState() => _PinState();
}

class _PinState extends State<Pin> {
  TextEditingController pin = TextEditingController();
  Color primaryColor = Colors.transparent.withOpacity(0.2);
  Color secondaryColor = Colors.grey.shade800;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppbar(titleTxt: "Verify your number"),
      backgroundColor: Colors.black,
      extendBody: true,
      body: Stack(
        children: [
          CommonBlurLeft(),
          CommonBlurRight(),
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                child: ListView(
                  physics: BouncingScrollPhysics(),
                  // mainAxisAlignment: MainAxisAlignment.start,
                  // crossAxisAlignment: CrossAxisAlignment.start,

                  children: [
                    SizedBox(
                      height: 10.h,
                    ),
                    text18W400("Quickly set up pin for secure access."),
                    SizedBox(
                      height: 180.h,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        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: pin,
                            onCompleted: (v) {
                              print("Completed");
                            },
                            onChanged: (value) {
                              print(value);
                              setState(() {});
                            },
                            beforeTextPaste: (text) {
                              print("Allowing to paste $text");

                              return true;
                            },
                            appContext: context,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 180.h,
                    ),
                    CommonBtn(
                      text: "Setup",
                      onTap: () {
                        Get.toNamed(RouteName.loginscreen);
                      },
                    )
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}