import 'package:flutter/material.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

/// Form field to edit a credit card CVC code, with validation
class CardCvcFormField extends StatefulWidget {
  const CardCvcFormField(
      {Key? key,
      this.initialValue,
      required this.onSaved,
      required this.validator,
      required this.onChanged,
      this.decoration = defaultDecoration,
      this.textStyle = defaultTextStyle})
      : super(key: key);

  final String? initialValue;
  final InputDecoration decoration;
  final TextStyle textStyle;
  final void Function(String?) onSaved;
  final void Function(String) onChanged;
  final String? Function(String?) validator;

  static const defaultErrorText = 'Invalid CVV';
  static const defaultDecoration = InputDecoration(border: OutlineInputBorder(), labelText: 'CVV', hintText: 'XXX');
  static const defaultTextStyle = TextStyle(color: Colors.black);

  @override
  _CardCvcFormFieldState createState() => _CardCvcFormFieldState();
}

class _CardCvcFormFieldState extends State<CardCvcFormField> {
  final maskFormatter = MaskTextInputFormatter(mask: '####');

  @override
  Widget build(BuildContext context) {
    return TextFormField(
        initialValue: widget.initialValue,
        autofillHints: const [AutofillHints.creditCardSecurityCode],
        inputFormatters: [maskFormatter],
        onChanged: widget.onChanged,
        validator: widget.validator,
        onSaved: widget.onSaved,
        style: widget.textStyle,
        decoration: widget.decoration,
        textInputAction: TextInputAction.next,
        // Use TextInputType.datetime instead of TextInputType.number to fix the numeric keyboard issue on
        // iOS devices running iOS12 and lower. See: https://github.com/flutter/flutter/issues/58510
        keyboardType: TextInputType.datetime);
  }
}
