// @flow
import React, { Fragment, PureComponent } from 'react'
import prop from 'ramda/src/prop'
import { type EventType, type InputType } from '../../types'
import Box from '../../elements/Box'
import Checkbox from '../../elements/Checkbox'

type Props = {
  change: (string | () => string,
    boolean | () => boolean) => void,
  direction?: string,
  input?: InputType,
  label: string,
  readOnly?: boolean,
  render: () => Node,
}

type State = {
  showSupplemental: boolean,
}

class CheckboxWithSupplementaryField extends PureComponent<Props, State> {
  static defaultProps = {
    direction: 'horizontal',
    input: undefined,
    meta: undefined,
    readOnly: false,
  }

  state = {
    showSupplemental: false,
  }

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

  handleShowSupplemental = (e: EventType) => {
    const { target: { checked } } = e
    const { change, input } = this.props
    this.setState(() => ({
      showSupplemental: checked,
    }))
    if (change) {
      change(prop('name', input), checked)
    }
  }

  render() {
    const { direction, input, label, readOnly, render } = this.props
    const { showSupplemental } = this.state
    return (
      <Fragment>
        <Checkbox
          defaultChecked={prop('value', input)}
          id={`${prop('name', input)}-${label}`}
          label={label}
          name={prop('name', input)}
          onFocus={prop('onFocus', input)}
          onChange={this.handleShowSupplemental}
          onBlur={this.handleShowSupplemental}
          readOnly={readOnly === true}
          value={undefined}
        />
        <Box mt={direction === 'vertical' ? 4 : null}>
          { showSupplemental ? render() : null }
        </Box>
      </Fragment>
    )
  }
}

export default CheckboxWithSupplementaryField