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


type Props = {
  autoComplete?: string,
  direction?: string,
  input?: InputType,
  label: string,
  labelModifier?: string,
  meta?: MetaType,
  modifier?: string,
  noLabel?: boolean,
  pattern?: string,
  placeholder?: string,
  readOnly?: boolean,
  render: () => Node,
  showSupplementalFn: (string | () => string) => boolean,
  type?: string,
}

type State = {
  showSupplemental: boolean
}

class InputWithSupplementaryField extends PureComponent<Props, State> {
  static defaultProps = {
    autoComplete: undefined,
    direction: 'horizontal',
    input: undefined,
    labelModifier: undefined,
    meta: undefined,
    modifier: undefined,
    noLabel: false,
    pattern: undefined,
    placeholder: undefined,
    readOnly: false,
    type: undefined,
  }

  state = { showSupplemental: false }

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

  handleShowSupplemental = (e: EventType) => {
    const { target: { value } } = e
    const { showSupplementalFn } = this.props
    this.setState(() => ({
      showSupplemental: showSupplementalFn && showSupplementalFn(value),
    }))
  }

  render() {
    const {
      autoComplete,
      direction,
      input,
      label,
      labelModifier,
      meta,
      modifier,
      noLabel,
      pattern,
      placeholder,
      readOnly,
      render,
      type,
    } = this.props
    const { showSupplemental } = this.state

    return (
      <Fragment>
        <Input
          autoComplete={autoComplete}
          input={input}
          label={label}
          labelModifier={labelModifier}
          meta={meta}
          modifier={modifier}
          noLabel={noLabel}
          pattern={pattern}
          placeholder={placeholder}
          onBlur={this.handleShowSupplemental}
          onChange={this.handleShowSupplemental}
          readOnly={readOnly}
          type={type}
        />
        <Box mt={direction === 'vertical' ? 4 : null}>
          { showSupplemental ? render() : null }
        </Box>
      </Fragment>
    )
  }
}

export default InputWithSupplementaryField