import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { renderInput } from '../OneForm/OneForm'
import { StyledFieldSet, StyledLegend } from './styled'
import { FieldSetProps } from './typings'

@observer
export class FieldSet extends React.Component<FieldSetProps> {
  render() {
    // @todo - do we need children ever?
    const {
      ref,
      state,
      elementList,
      children,
      legend,
      ...remainingProps
    } = this.props
    const inputsView = elementList.map(renderInput)
    return (
      <StyledFieldSet {...remainingProps}>
        <StyledLegend>{legend}</StyledLegend>
        {children}
        {inputsView}
      </StyledFieldSet>
    )
  }
}