import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:general_package/apiservices/apiservices.dart';
import 'package:general_package/constants/constants.dart';
import 'package:general_package/dynamic_form/dynamic_form.dart';
import 'package:general_package/dynamic_form/src/view/dynamic_form_button.dart';
import 'package:general_package/themes/themes.dart';
import 'package:pinput/pinput.dart';

/// This is the basic usage of Pinput
/// For more examples check out the demo directory
class DynamicFormOTPWidget extends StatefulWidget {
  DynamicFormOTPWidget({
    Key? key,
    required this.dynamicFormButtonModel,
    required this.name,
  }) : super(key: key);
  String name;
  DynamicFormButtonModel dynamicFormButtonModel;
  @override
  State<DynamicFormOTPWidget> createState() => _DynamicFormOTPWidgetState();
}

class _DynamicFormOTPWidgetState extends State<DynamicFormOTPWidget> {
  final pinController = TextEditingController();
  final focusNode = FocusNode();
  final formKey = GlobalKey<FormState>();

  bool showError = false;
  @override
  void dispose() {
    pinController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final defaultPinTheme = PinTheme(
      height: 78,
      width: 74,
      textStyle: Theme.of(context).textTheme.headline6,
      decoration: BoxDecoration(
        color: AppTheme.lightWhiteColor,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: AppTheme.blackColor.withOpacity(0.2),
            offset: const Offset(0, 2),
            blurRadius: 4,
          ),
        ],
      ),
    );
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GeneralConstants.instance.sizedBoxHeight20,
          FormBuilderField(
              name: widget.name,
              builder: (FormFieldState field) {
                return Pinput(
                  controller: pinController,
                  focusNode: focusNode,
                  androidSmsAutofillMethod:
                      AndroidSmsAutofillMethod.smsUserConsentApi,
                  hapticFeedbackType: HapticFeedbackType.lightImpact,
                  listenForMultipleSmsOnAndroid: true,
                  defaultPinTheme: defaultPinTheme,
                  onCompleted: ((value) => field.didChange(value)),
                  cursor: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        margin: const EdgeInsets.only(bottom: 9),
                        width: 22,
                        height: 1,
                        color: AppTheme.primaryColor,
                      ),
                    ],
                  ),
                  focusedPinTheme: defaultPinTheme.copyWith(
                    height: 78,
                    width: 74,
                    decoration: defaultPinTheme.decoration!.copyWith(
                      border: Border.all(color: AppTheme.lightWhiteColor),
                    ),
                  ),
                  errorPinTheme: defaultPinTheme.copyBorderWith(
                    border: Border.all(color: AppTheme.redColor),
                  ),
                );
              }),
          GeneralConstants.instance.sizedBoxHeight20,
          GeneralConstants.instance.sizedBoxHeight10,
          Padding(
            padding: GeneralConstants.instance.padding10,
            child: Text(
              "Didn’t receive the code?",
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ),
          DynamicFormButton(
              dynamicFormButtonModel: widget.dynamicFormButtonModel),
          GeneralConstants.instance.sizedBoxHeight20,
          GeneralConstants.instance.sizedBoxHeight20,
        ],
      ),
    );
  }
}
