import React, { Component, PropTypes } from 'react'
import Select from 'react-select'
import CSSModules from 'react-css-modules'

import 'react-select/dist/react-select.min.css'
import styles from './index.styl'

@CSSModules(styles, { allowMultiple: true, errorWhenNotFound: false })

export default class extends Component {
  static propTypes = {
    inputWidth: PropTypes.string,
    labelWidth: PropTypes.string,
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    options: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element
      ]),
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ])
    })),
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    required: PropTypes.bool
  }
  static defaultProps = {
    inputWidth: '200px'
  }
  handleChange (v) {
    if (!this.props.multi && Array.isArray(v)) {                                                    // 防止传回错误的value
      return false
    }
    let e = {}
    e.target = {}
    if (v) {
      e.target.value = v.value || v.map(o => o.value)
    } else {
      e.target.value = ''
    }
    this.props.onChange(e)
  }

  render () {
    return (
      <div styleName='Select' style={Object.assign({}, this.props.style)}>
        <label>
          {
            this.props.label
            ? <span styleName={this.props.required ? 'label required' : 'label'} style={Object.assign({}, {width: this.props.labelWidth})}>{this.props.label}</span>
            : <span></span>
          }
          <div style={Object.assign({}, {width: this.props.inputWidth})}>
            <Select
              searchable={false}
              clearable={false}
              {...this.props}
              onChange={this.props.onChange ? this.handleChange.bind(this) : null} />
          </div>
        </label>
      </div>
    )
  }
}