// @flow
import React, { PureComponent, type Node } from 'react'
import { __, any, curry, find, prop, propEq } from 'ramda'
import { forEachIndexed, mapIndexed } from '../../utils'
import CheckboxGroup from '../CheckboxGroup'
import Box from '../../elements/Box'
import { type InputType, type MetaType } from '../../types'

const eqFunc = curry((val, obj) => propEq('showSupplementalValue', val)(obj))

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 = {
}

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

  state = { showSupplementalFields: [false, false] }

  componentWillMount() {
    const { supplementaryFields, input } = this.props
    const val = prop('value', input)
    const selectedValues = find(eqFunc(val), supplementaryFields)
    if (selectedValues != null) {
      forEachIndexed((obj, i) => (
        this.setState(() => ({
          [`showSupplemental${i}`]: true,
        }))
      ), selectedValues)
    }
  }

  handleShowSupplemental = (isChecked: boolean, values: Array<string>) => {
    const { supplementaryFields } = this.props
    forEachIndexed((obj, index) => {
      this.setState(() => ({
        [`showSupplemental${index}`]: any(eqFunc(__, obj), values),
      }))
    }, supplementaryFields)
  }

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

    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}
        />
        { mapIndexed((obj, i) => (
          /* eslint-disable react/destructuring-assignment */
          this.state[`showSupplemental${i}`]
          && (
          <Box mt={4} key={obj.showSupplementalValue}>
            { obj.render() }
          </Box>
          )
        ), supplementaryFields) }
      </Box>
    )
  }
}

export default CheckboxGroupWithTwoSupFields