'use strict';

import React, {PropTypes} from 'react';

import cx from 'classnames';
import {head, pick} from 'lodash';
import {BACKSPACE, RIGHT, TAB} from './keyCode';

/**
 * TypeaheadInput
 *
 * Handles a single selection from the Typeahead component.
 */
const TypeaheadInput = React.createClass({
  displayName: 'TypeaheadInput',

  propTypes: {
    disabled: PropTypes.bool,
    filteredOptions: PropTypes.array,
    labelKey: PropTypes.string,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    onFocus: PropTypes.func,
    placeholder: PropTypes.string,
    selected: PropTypes.object,
    text: PropTypes.string,
  },

  getInitialState() {
    return {
      isFocused: false,
    };
  },

  render() {
    const {className, disabled, selected, text} = this.props;
    const inputProps = pick(this.props, [
      'disabled',
      'onChange',
      'onFocus',
      'placeholder',
    ]);

    return (
      <div
        className={cx('bootstrap-typeahead-input', className)}
        onClick={this._handleInputFocus}
        onFocus={this._handleInputFocus}
        style={{outline: 'none'}}
        tabIndex={-1}>
        <input
          {...inputProps}
          className={cx('bootstrap-typeahead-input-main', 'form-control', {
            'has-selection': !selected,
          })}
          onBlur={this._handleBlur}
          onKeyDown={this._handleKeydown}
          ref="input"
          style={{
            backgroundColor: !disabled && 'transparent',
            display: 'block',
            position: 'relative',
            zIndex: 1,
          }}
          type="text"
          value={text}
        />
        <input
          className="bootstrap-typeahead-input-hint form-control"
          style={{
            borderColor: 'transparent',
            bottom: 0,
            boxShadow: 'none',
            display: 'block',
            position: 'absolute',
            top: 0,
            width: '100%',
            zIndex: 0,
          }}
          tabIndex={-1}
          type="text"
          value={this._getHintText()}
        />
      </div>
    );
  },

  _getHintText() {
    const {filteredOptions, labelKey, text} = this.props;
    let firstOption = head(filteredOptions);

    // Only show the hint if...
    if (
      // ...the input is focused.
      this.state.isFocused &&
      // ...the input contains text.
      text &&
      // ...the input text corresponds to the beginning of the first option.
      firstOption &&
      firstOption[labelKey].indexOf(text) === 0
    ) {
      return firstOption[labelKey];
    }

    return '';
  },

  _handleBlur(e) {
    this.setState({isFocused: false});
    this.props.onBlur && this.props.onBlur(e);
  },

  /**
   * If the containing parent div is focused or clicked, focus the input.
   */
  _handleInputFocus(e) {
    this.setState({isFocused: true});
    this.refs.input.focus();
  },

  _handleKeydown(e) {
    const {filteredOptions, onAdd, onRemove, selected} = this.props;

    switch (e.keyCode) {
      case RIGHT:
      case TAB:
        // Autocomplete the selection if there's a hint and no selection yet.
        if (this._getHintText() && !selected) {
          e.stopPropagation();
          onAdd && onAdd(head(filteredOptions));
        }
        break;
      case BACKSPACE:
        // Remove the selection if we start deleting it.
        selected && onRemove && onRemove(selected);
        break;
    }

    this.props.onKeyDown && this.props.onKeyDown(e);
  },
});

export default TypeaheadInput;

@@ -2176,18 +2176,20 @@
 ps;%0A    
-le
+cons
 t firstO
@@ -2218,16 +2218,84 @@
 ptions);
+%0A    const firstOptionString = firstOption && firstOption%5BlabelKey%5D;
 %0A%0A    //
@@ -2538,16 +2538,22 @@
 stOption
+String
  &&%0A    
@@ -2569,81 +2569,322 @@
 tion
-%5BlabelKey%5D.indexOf(text) === 0%0A    ) %7B%0A      return firstOption%5BlabelKey%5D
+String.toLowerCase().indexOf(text.toLowerCase()) === 0%0A    ) %7B%0A      // Text matching is case-insensitive, so to display the hint correctly,%0A      // splice the input text with the rest of the actual string.%0A      return text + firstOptionString.slice(%0A        text.length,%0A        firstOptionString.length%0A      )
 ;%0A  

Make hint text case-insensitive