import React from 'react';
import Select from 'react-select';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/exploreActions';
import { connect } from 'react-redux';

const propTypes = {
  actions: React.PropTypes.object,
  selectArray: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      key: React.PropTypes.string.isRequired,
      title: React.PropTypes.string.isRequired,
      options: React.PropTypes.array.isRequired,
      value: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.array,
      ]),
      width: React.PropTypes.string,
      multi: React.PropTypes.bool,
    })
  ).isRequired,
};

const defaultProps = {
  selectArray: [],
};

class SelectArray extends React.Component {
  changeSelectData(key, multi, opt) {
    if (multi) this.props.actions.setFormData(key, opt);
    else {
      const val = opt ? opt.value : null;
      this.props.actions.setFormData(key, val);
    }
  }
  render() {
    const selects = this.props.selectArray.map((obj) => (
      <div
        className={(obj.width) ? `col-sm-${obj.width}` : 'col-sm-6'}
        key={obj.key}
      >
        <h5 className="section-heading">{obj.title}</h5>
        <Select
          multi={obj.multi}
          name={`select-${obj.key}`}
          options={obj.options}
          value={obj.value}
          autosize={false}
          onChange={this.changeSelectData.bind(this, obj.key, obj.multi)}
        />
      </div>
    ));
    return (
      <div>
        {selects}
      </div>
    );
  }
}

SelectArray.propTypes = propTypes;
SelectArray.defaultProps = defaultProps;

function mapStateToProps() {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectArray);