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

type LabelProps = {
  label: string,
};

type FreeFormInputProp = {
  placeholder: string,
  value: ?string,
  onChange?: string => void,
};
export type RadioOptionProp = {
  id: string,
  text: TranslatedContent,
  selected: boolean,
  onClick: string => void,
  description?: TranslatedContent,
  freeForm?: FreeFormInputProp,
};

export type RadioProps = LabelProps & {
  options: Array<{
    id: string,
    text: string,
    description?: TranslatedContent,
    freeForm?: FreeFormInputProp,
  }>,
  selectedId: ?string,
  onClick: string => void,
};

const freeFormInput = {
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string,
  onChange: PropTypes.func,
};

const radioOption = {
  id: PropTypes.string.isRequired,
  text: translatedContentPropType.isRequired,
  onTextChange: PropTypes.func,
  freeForm: PropTypes.shape(freeFormInput),
};

const radioOptionsPropTypes = {
  options: PropTypes.arrayOf(PropTypes.shape(radioOption)),
  selectedId: PropTypes.string,
  onClick: PropTypes.func,
};

const labelPropTypes = {
  label: PropTypes.string.isRequired,
};

export const radioPropTypes = {
  ...radioOptionsPropTypes,
  ...labelPropTypes,
};
