import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ftc_mobile_app/ftc_mobile_app.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

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

  @override
  State<OTPScreen> createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  final OTPScreenController _controller = Get.put(OTPScreenController());

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      screenKey: _controller.screenKey,
      onScreenTap: _controller.removeFocus,
      avoidBottomInsets: false,
      showAppBar: true,
      titleText: "",
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 15.0.w),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            CustomImageWidget(
              imagePath: AssetsManager.kLockIcon,
              imageColor: CustomAppColors.kIconColor,
              height: 84.h,
              width: 75.w,
            ),

            Padding(
              padding: EdgeInsets.only(top: 30.0.h),
              child: CustomTextWidget(
                text: ConstantText.kTwoFactorAuth,
                fontColor: CustomAppColors.kIconColor,
                fontWeight: FontWeight.w700,
                fontSize: 24.sp,
                alignment: Alignment.centerLeft,
              ),
            ),

            CustomTextWidget(
              text: ConstantText.kOTPScreenMsg,
              fontColor: CustomAppColors.kIconColor,
              fontWeight: FontWeight.w400,
              fontSize: 14.sp,
              alignment: Alignment.centerLeft,
              textAlign: TextAlign.start,
            ),

            Padding(
              padding: EdgeInsets.only(top: 20.0.h),
              child: PinCodeTextField(
                keyboardType: TextInputType.number,
                textInputAction: TextInputAction.done,
                autoDisposeControllers: false,
                controller: _controller.otpController,
                inputFormatters: [
                  FilteringTextInputFormatter.digitsOnly,
                ],
                onAutoFillDisposeAction: AutofillContextAction.cancel,
                appContext: context,
                length: 6,
                onChanged: (otp) {
                  _controller.validateOTP();
                },
                cursorColor: CustomAppColors.kIconColor,
                textStyle: TextStyle(
                  color: CustomAppColors.kIconColor.withOpacity(0.6),
                ),
                pinTheme: PinTheme(
                  shape: PinCodeFieldShape.box,
                  borderRadius: BorderRadius.circular(2.r),
                  fieldHeight: 56.0.h,
                  fieldWidth: 43.33.w,
                  borderWidth: 0.5.w,
                  fieldOuterPadding: EdgeInsets.symmetric(vertical: 10.0.h,),
                  activeFillColor: CustomAppColors.kIconColor.withOpacity(0.6),
                  activeColor: CustomAppColors.kIconColor.withOpacity(0.6),
                  errorBorderColor: CustomAppColors.kIconColor.withOpacity(0.6),
                  selectedColor: CustomAppColors.kIconColor.withOpacity(0.6),
                  inactiveColor: CustomAppColors.kIconColor.withOpacity(0.6),
                  selectedFillColor: CustomAppColors.kIconColor.withOpacity(0.6),
                ),
              ),
            ),
            Obx(() {
              return CustomErrorMsg(
                message: _controller.otpErrorMsg.value,
              );
            }),
            const Spacer(),

            Padding(
              padding: EdgeInsets.only(
                bottom: Platform.isIOS ? 30.0.h : 20.0.h,
              ),
              child: Obx((){
                return CustomAppButton(
                  isLoading: _controller.isLoading.value,
                  buttonText: ConstantText.kSubmit.toUpperCase(),
                  onTap: _controller.onSubmitButton,
                );
              }),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}