// @flow
import React, { PureComponent, type Node } from 'react'
import { any, curry, filter, prop, propEq, map } from 'ramda'
import CheckboxGroup from '../CheckboxGroup'
import Box from '../../elements/Box'
import { type InputType, type MetaType } from '../../types'

const eqFunc = curry((vals, obj) => any(v => propEq('showSupplementalValue', v)(obj), vals))

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

type State = {
  showingSupplementals: [],
}

class CheckboxGroupWithNSupFields extends PureComponent<Props, State> {
  static defaultProps = {
    change: undefined,
    gridStyles: undefined,
    labelModifier: undefined,
    noLabel: false,
    direction: 'horizontal',
    readOnly: false,
    input: { name: null },
    meta: { touched: false, error: '' },
    modifier: 'horizontal',
  }

  state = {
    showingSupplementals: [],
  }

  componentWillMount() {
    const { supplementaryFields, input } = this.props
    const values = prop('value', input)
    let selectedValues
    if (values != null) {
      selectedValues = filter(eqFunc(values), supplementaryFields)
    }
    if (selectedValues != null) {
      this.setState(() => ({
        showingSupplementals: selectedValues,
      }))
    }
  }

  handleShowSupplemental = (isChecked: boolean, values: Array<string>) => {
    const { supplementaryFields } = this.props
    const selectedValues = filter(eqFunc(values), supplementaryFields)
    this.setState(() => ({
      showingSupplementals: selectedValues,
    }))
  }

  render() {
    const { change, direction, gridStyles, label, labelModifier, input, meta, modifier,
      noLabel, readOnly, supplementaryFields, values, ...styles } = this.props
    const { showingSupplementals } = this.state

    return (
      <Box {...styles}>
        <CheckboxGroup
          change={change}
          direction={direction}
          gridStyles={gridStyles}
          input={input}
          label={label}
          labelModifier={labelModifier}
          meta={meta}
          noLabel={noLabel}
          onChangeDouble={this.handleShowSupplemental}
          readOnly={readOnly}
          values={values}
        />
        { map(obj => (
          <Box mt={4} key={obj.showSupplementalValue}>
            { obj.render() }
          </Box>), showingSupplementals)
        }
      </Box>
    )
  }
}

export default CheckboxGroupWithNSupFields