// @flow
import React, { PureComponent, type Node } from 'react'
import { prop } from 'ramda'
import RadioGroup from '../RadioGroup'
import Box from '../../elements/Box'
import { type EventType, type InputType, type MetaType } from '../../types'

type Props = {
  cols: string,
  gridStyles?: {},
  input?: InputType,
  label: string,
  labelModifier?: ?string,
  meta?: MetaType,
  modifier?: string,
  noLabel?: boolean,
  readOnly?: boolean,
  render: () => Node,
  showSupplementalValue: string,
  values: Array<{
    label: string,
    value: string,
    id?: ?string,
  }>,
}

type State = {
  showSupplemental: boolean
}

class RadioGroupWithSupplementaryField extends PureComponent<Props, State> {
  static defaultProps = {
    gridStyles: undefined,
    input: undefined,
    labelModifier: undefined,
    meta: undefined,
    modifier: 'horizontal',
    noLabel: false,
    readOnly: false,
  }

  state = { showSupplemental: false }

  componentWillMount() {
    const { showSupplementalValue, input } = this.props
    if (showSupplementalValue === prop('value', input)) {
      this.setState(() => ({
        showSupplemental: true,
      }))
    }
  }

  handleShowSupplemental = (e: EventType) => {
    const { target: { value } } = e
    this.setState((state, { showSupplementalValue }) => ({
      showSupplemental: value === showSupplementalValue,
    }))
  }

  render() {
    const { cols, gridStyles, input, label, labelModifier, meta, modifier, noLabel,
      readOnly, values, render, ...styles } = this.props
    const { showSupplemental } = this.state

    return (
      <Box {...styles}>
        <RadioGroup
          cols={cols}
          gridStyles={gridStyles}
          input={input}
          label={label}
          labelModifier={labelModifier}
          meta={meta}
          modifier={modifier}
          noLabel={noLabel}
          onBlur={this.handleShowSupplemental}
          onChange={this.handleShowSupplemental}
          readOnly={readOnly}
          values={values}
        />
        { showSupplemental
          && (
          <Box mt={4}>
            {render()}
          </Box>
          )
        }
      </Box>
    )
  }
}

export default RadioGroupWithSupplementaryField