import React from 'react';
import { TextInput, TextInputProps, type StyleProp, type ViewStyle } from 'react-native';
import { maskDateBR } from '../lib/brazilian-date-input';
import { TextField } from './TextField';

export function DateField({
  value,
  onChange,
  placeholder = 'DD/MM/AAAA',
  containerStyle,
  inputRef,
  returnKeyType,
  onSubmitEditing,
}: {
  value: string;
  onChange: (masked: string) => void;
  placeholder?: string;
  containerStyle?: StyleProp<ViewStyle>;
  inputRef?: React.Ref<TextInput>;
  returnKeyType?: TextInputProps['returnKeyType'];
  onSubmitEditing?: TextInputProps['onSubmitEditing'];
}) {
  return (
    <TextField
      inputRef={inputRef}
      placeholder={placeholder}
      keyboardType="number-pad"
      maxLength={10}
      value={value}
      returnKeyType={returnKeyType}
      onSubmitEditing={onSubmitEditing}
      onChangeText={(t) => onChange(maskDateBR(t))}
      containerStyle={containerStyle}
    />
  );
}