import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { FormState } from 'src/forms'
import RadioGroupMolecule from './RadioGroupStateless'
import RadioGroupState from './state'
import { RadioGroupProps } from './typings'

@observer
class RadioGroup extends React.Component<RadioGroupProps> {
  /**
   * @see Toggle/index
   *
   * @see props.state
   * @todo could also work as elementGroup used in ObserverForm
   *
   * @todo this should help overlap the serializing of the elementGroup
   * issue with elementGroup serializing is it just calls serialize on each
   * if you add 1 line conditional to serialize each, or use JSON.stringify,
   * the toJSON gets called where available ... natively
   *
   * @example this is just how it will work to  help out
   */
  state = this.props.state || new RadioGroupState(this.props)

  componentWillMount() {
    // this isn't being passed a RadioGroupState in ProfileInformation
    this.state.init()
  }
  render() {
    const { name, onChange } = this.props
    return (
      <RadioGroupMolecule name={name} state={this.state} onChange={onChange} />
    )
  }
}

export { RadioGroup }
export { RadioGroup as RadioGroupBase }
export default RadioGroup