import React from 'react'
import PropTypes from 'prop-types'
import { HOC as hoc } from 'formsy-react'
import cn from 'classnames'
import FormsySelect from './FormsySelect'
import './FormsyDropdowns.scss'


/**
 * This component is a formsy wrapper for the React Select component
 * @param {Object} props Component props
 */
const FormsyDropdowns = props => {
  const { lProps, rProps, onChange, name, wrapperClass, label } = props

  const onChangeL = selectedOption => {
    const value = props.getValue() || []
    value[0] = selectedOption
    props.setValue(value)
    onChange && onChange(name, value)
  }

  const onChangeR = selectedOption => {
    const value = props.getValue() || []
    value[1] = selectedOption
    props.setValue(value)
    onChange && onChange(name, value)
  }

  return (
    <div className={cn(wrapperClass, 'formsySelectComponent dropdowns')}>
      <label className="tc-label">{label}</label>
      <FormsySelect {...lProps} onChange={onChangeL} name="dropdowns-L"/>
      <FormsySelect {...rProps} onChange={onChangeR} name="dropdowns-R"/>
    </div>
  )
}

FormsyDropdowns.PropTypes = {
  onChange: PropTypes.func,
  setValueOnly: PropTypes.bool,
  lProps: PropTypes.object,
  rProps: PropTypes.object
}

export default hoc(FormsyDropdowns)