// @flow
import React, { Fragment, PureComponent } from 'react'
import { keys, map, prop } from 'ramda'
import ErrorMessage from '../../elements/ErrorMessage'
import Grid from '../../elements/Grid'
import GridBox from '../../elements/GridBox'
import { DecalLabel } from '../../elements/Decal'
import Radio from '../../elements/Radio'
import { type EventType, type InputType, type MetaType } from '../../types'

type Props = {
  change?: (string | () => string, string | () => string) => void,
  direction?: string,
  input?: InputType,
  meta: MetaType,
  readOnly?: boolean,
  values: {},
}

class DoubleRadioGroup extends PureComponent<Props> {
  static defaultProps = {
    change: null,
    direction: 'horizontal',
    readOnly: false,
    input: { name: null },
  }

  handleOnChange = (e: EventType) => {
    const { target } = e
    const { change, input } = this.props
    if (change && input) {
      change(input.name, target.value)
    }
  }

  render() {
    const { change, direction, input, meta, readOnly, values } = this.props
    return (
      <GridBox gridColumnStart="1" gridColumnEnd={['span 1', 'span 2']}>
        <Grid
          role="radiogroup"
          cols="2"
          direction={direction === 'vertical' ? 'columns' : 'rows'}
          gridGap={4}
        >
          { map(key => (
            <Fragment key={key}>
              <DecalLabel maxHeight={42} htmlFor={key}>
                {key}
              </DecalLabel>
              <Grid
                direction={direction === 'vertical' ? 'rows' : 'columns'}
                cols="3"
                gridGap={3}
              >
                { map(
                  ({ label, value }) => (
                    <Radio
                      checked={prop('value', input) === value}
                      id={`${prop('name', input)}-${key}-${label}`}
                      key={`${key}.${label}`}
                      label={label}
                      name={prop('name', input)}
                      readOnly={readOnly}
                      onChange={change ? this.handleOnChange : null}
                      onBlur={change ? this.handleOnChange : null}
                      onFocus={prop('onFocus', input)}
                      value={value}
                    />),
                  values[key],
                ) }
              </Grid>
            </Fragment>
          ), keys(values)) }
        </Grid>
        {meta.touched && meta.error
          && (
          <ErrorMessage
            message={meta.error}
          />
          )
        }
      </GridBox>
    )
  }
}


export default DoubleRadioGroup