import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { RadioGroupMoleculeProps } from './typings'

/**
 * @todo - this should be able to be a PureComponent
 *
 * @todo use more `id` for perf & ada
 * => aria-labelledby
 *
 * @tutorial https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/radiogroup
 * @api @ada https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html
 */
@observer
class RadioGroupMolecule extends React.Component<RadioGroupMoleculeProps> {
  constructor(props: RadioGroupMoleculeProps) {
    super(props)
    this.state = props.state
  }

  private get attributes() {
    const { identifier } = this.props
    const attributes = {
      id: identifier,
    }
    return attributes
  }
  private get list() {
    return this.state.inputsList.map(this.renderItem)
  }

  /**
   * === @render ===
   */

  renderItem = (item, index?: number) => {
    // console.log({ item })
    const { onChange, renderItem } = this.props
    return renderItem({ ...item, onChange }, index, this.state)
  }
  render() {
    // @todo styled section?
    return (
      <section {...this.attributes} role="radiogroup">
        {this.list}
      </section>
    )
  }
}

export { RadioGroupMolecule }
export default RadioGroupMolecule