// @flow

import PropTypes from 'prop-types';

import {
  type SelectorItemProps,
  selectorItemProptypes,
} from '../selector-item/selector-item.proptypes';

import {
  type FormInputProps,
  formInputPropTypes,
} from '../../form-input/form-input.proptypes';
import type { FormFieldError } from '../../forms.proptypes';

export type SelectorItemWithInputProps = SelectorItemProps & {
  onInputChange: $PropertyType<FormInputProps<string | number>, 'onChange'>,
  inputValue: $PropertyType<FormInputProps<string | number>, 'value'>,
  inputProps?: $Diff<
    FormInputProps<string | number>,
    {
      onChange: *,
      value: *,
    },
  >,
  inputError?: FormFieldError,
};

export const selectorItemWithInputProptypes = {
  checked: selectorItemProptypes.checked,
  disabled: selectorItemProptypes.disabled,
  large: selectorItemProptypes.large,
  id: selectorItemProptypes.id,
  label: selectorItemProptypes.label,
  secondaryLabel: selectorItemProptypes.secondaryLabel,
  value: selectorItemProptypes.value,
  onInputChange: formInputPropTypes.onChange,
  inputValue: formInputPropTypes.value,
  inputProps: PropTypes.shape({
    type: formInputPropTypes.type,
    placeholder: formInputPropTypes.placeholder,
    onFocus: formInputPropTypes.onFocus,
    onBlur: formInputPropTypes.onBlur,
    onRef: formInputPropTypes.onRef,
    error: formInputPropTypes.error,
  }),
};
