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

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

export const formInputPropTypes = {
  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,
  inputMode: PropTypes.string,
};
