// @flow
import type { Node } from 'react';
import PropTypes from 'prop-types';
import type { TranslatedContent } from '../../../types';
import type { SpaceKey } from '../../../mixins/spacing';

export type SelectorItemContext = {
  name?: string,
  managedValue?: string | number | string[],
  stateful?: boolean,
  onChange: (SyntheticInputEvent<HTMLElement>) => void,
};

export type SelectorProps = {
  children?: Node,
  name: string,
  type?: string,
  onChange: (input: string) => void,
  label?: TranslatedContent,
  size?: 'sm' | 'md' | 'lg',
  labelSpacing?: SpaceKey[],
};

export const selectorContextTypes = {
  stateful: PropTypes.bool,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  managedValue: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.string),
    PropTypes.string,
    PropTypes.number,
  ]),
  type: PropTypes.oneOf(['radio', 'checkbox']),
};

export const selectorProptypes = {
  stateful: PropTypes.bool,
  children: PropTypes.any.isRequired,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  managedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  type: PropTypes.oneOf(['radio', 'checkbox']),
};
