//@flow
import React, {Component} from 'react';
import PropTypes from 'prop-types'

type GroupProps = {
  name: string,
  children?: Array<React$Element<*>>,
};

let groupName;

export class RadioGroup extends Component<GroupProps> {
  props: GroupProps;
  static childContextTypes = {
    name: PropTypes.string,
  };

  getChildContext() {
    return {name: this.props.name};
  }
  render() {
    let {name, children, ...otherProps} = this.props;
    groupName = name;

    return <div {...otherProps}>{children}</div>;
  }
}

type ItemProps = {
  children?: Array<React$Element<*>>,
};

export class RadioItem extends Component<ItemProps> {
  props: ItemProps;
  static contextTypes = {
    name: PropTypes.string,
  };
  render() {
    let {children, ...otherProps} = this.props;
    return (
      <div {...otherProps}>
        <input name={this.context.name} type="radio" />
        <span>{children}</span>
      </div>
    );
  }
}