// @flow
import PropTypes from 'prop-types';
import { translatedContentPropType } from '../../../types';
import type { FormFieldError } from '../forms.proptypes';

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

export type MaskedTextInputProps<ValueType> = {
  id?: string,
  className?: string,
  type?: 'date' | 'email' | 'number' | 'text' | 'password', // these types for now
  options?: MaskedTextInputOptions,
  placeholder?: ValueType,
  value?: ?ValueType,
  disabled?: boolean,
  error?: FormFieldError,
  focusOnMount?: boolean,
  large?: boolean,
  iconType?: 'lock' | 'error',
  iconPosition?: 'left' | 'right',
  onChange: (string, SyntheticInputEvent<HTMLInputElement>) => void,
  onFocus?: (SyntheticFocusEvent<HTMLInputElement>) => void,
  onBlur?: (SyntheticFocusEvent<HTMLInputElement>) => void,
  onRef?: HTMLInputElement => void,
  inputMode?: string,
};

export const maskedTextInputOptionsPropTypes = {
  date: PropTypes.bool,
  dateMin: PropTypes.string,
  dateMax: PropTypes.string,
  datePattern: PropTypes.arrayOf(PropTypes.string),
  delimiter: PropTypes.string,
  phone: PropTypes.bool,
  phoneRegionCode: PropTypes.string,
};

export const maskedTextInputPropTypes = {
  iconType: PropTypes.oneOf(['lock', 'error']),
  iconPosition: PropTypes.oneOf(['left', 'right']),
  type: PropTypes.oneOf(['date', 'email', 'number', 'text', 'password']),
  placeholder: PropTypes.string,
  value: PropTypes.string,
  disabled: PropTypes.bool,
  error: PropTypes.oneOfType([
    translatedContentPropType,
    PropTypes.bool,
    PropTypes.object,
    PropTypes.arrayOf(PropTypes.string),
  ]),
  focusOnMount: PropTypes.bool,
  large: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onRef: PropTypes.func,
  options: PropTypes.shape(maskedTextInputOptionsPropTypes),
  inputMode: PropTypes.string,
};
