import React from 'react'
import _ from 'underscore'

const FormFieldSelect = React.createClass({
  render() {
    if (this.props.field.values === undefined) {
      return false;
    }

    let filter = false;
    let placeholder = false;
    let sortBy = false;

    if (this.props.field.placeholder !== undefined) {
      placeholder = (
        <option value="">{ this.props.field.placeholder }</option>
      );
    }

    if (this.props.field['filter'] !== undefined) {
      filter = this.props.field.filter;
    }

    if (_.isFunction(this.props.field.sortBy)) {
      sortBy = this.props.field.sortBy;
    }

    let keys;
    if (sortBy) {
      // Extract keys from sorted [key, value] select value pairs, sorted by
      // provided sorting order.
      keys =
        _.map(
          _.sortBy(
            _.pairs(this.props.field.values),
            (item) => sortBy(item[0], item[1])
          ),
          (item) => item[0]
        );
    } else {
      keys = Object.keys(this.props.field.values)
    }

    const options = keys.map(
      (value, index) => {

        if (filter !== false && filter(this.props.item, value) === false) {
          return;
        }

        return (
          <option
            key={ 'option-' + index }
            value={ value }>
            { this.props.field.values[value] }
          </option>
        );
      }
    );

    return (
      <select
        name={ this.props.field.name }
        id={ 'field_'+this.props.field.name }
        value={ this.props.item[this.props.field.name] }
        onChange={ this.props.onValueChange }
        {...this.props.field.validation}
      >
        {placeholder}
        {options}
      </select>
    );
  }
});

module.exports = FormFieldSelect;