// @flow
import type { FormFieldError } from '../forms.proptypes';
import type { TranslatedContent } from '../../../../types';
import type { FontSize } from '../../../../mixins/typography';
import type { FocusEvents } from '../../../../mixins/focus';
import type { TestingProps } from '../../../../mixins/testing';

export type MaskedTextInputOptions = {|
  date?: boolean,
  dateMax?: string,
  dateMin?: string,
  datePattern?: Array<string>,
  delimiter?: string,
  noImmediatePrefix?: boolean,
  numeral?: boolean,
  phone?: boolean,
  phoneRegionCode?: string,
  prefix?: string,
  rawValueTrimPrefix?: boolean,
|};

export type MaskedTextInputProps<ValueType> = {|
  ...FocusEvents,
  ...TestingProps,
  id?: string,
  className?: string,
  type?: 'date' | 'email' | 'number' | 'text' | 'password', // these types for now
  options?: MaskedTextInputOptions,
  placeholder?: ValueType | TranslatedContent,
  value?: ?ValueType,
  disabled?: boolean,
  error?: FormFieldError,
  focusOnMount?: boolean,
  fontSize?: FontSize,
  large?: boolean,
  buttonText?: TranslatedContent,
  iconType?: 'lock' | 'error' | 'checkmark',
  iconPosition?: 'left' | 'right',
  onChange: (ValueType, SyntheticInputEvent<HTMLInputElement>) => void,
  onFocus?: (SyntheticFocusEvent<HTMLInputElement>) => void,
  onBlur?: (SyntheticFocusEvent<HTMLInputElement>) => void,
  onRef?: (HTMLInputElement) => void,
  buttonPress?: () => void,
  inputMode?: string,
  hideBorder?: boolean,
  label?: TranslatedContent,
  floatLabel?: boolean,
  name?: string,
  autocomplete?: string,

  /* Required for a11y if type="password" */
  hideValueButtonLabel?: TranslatedContent,
  revealValueButtonLabel?: TranslatedContent,
|};
