import React, {Component, PropTypes} from 'react';
import themeable from 'react-themeable';

import createSearchBox from '../createSearchBox';

import {getTranslation} from './utils';

const defaultTranslations = {
  submit: null,
  reset: null,
  submitTitle: 'Submit your search query.',
  resetTitle: 'Clear the search query.',
  placeholder: 'Search your website',
};

class SearchBox extends Component {
  static propTypes = {
    // Provided by `createSearchBox`
    query: PropTypes.string,
    setQuery: PropTypes.func.isRequired,
    search: PropTypes.func.isRequired,

    theme: PropTypes.object,
    translations: PropTypes.object,
    placeholder: PropTypes.string,
    poweredBy: PropTypes.bool,
    autoFocus: PropTypes.bool,
    searchAsYouType: PropTypes.bool,
    queryHook: PropTypes.func,
  };

  static defaultProps = {
    query: '',

    theme: {
      root: 'SearchBox',
      wrapper: 'SearchBox__wrapper',
      input: 'SearchBox__input',
      submit: 'SearchBox__submit',
      reset: 'SearchBox__reset',
    },
    translations: defaultTranslations,
    poweredBy: false,
    autoFocus: false,
    searchAsYouType: true,
    queryHook: (query, search) => search(query),
  };

  constructor(props) {
    super();

    this.state = {
      query: props.query,
    };
  }

  onInputMount = input => {
    this.input = input;
  };

  onSubmit = e => {
    e.preventDefault();
    e.stopPropagation();

    const {queryHook, searchAsYouType} = this.props;
    const {query} = this.state;
    if (!searchAsYouType) {
      queryHook(query, this.search);
    }
    return false;
  };

  onChange = e => {
    const {queryHook, searchAsYouType} = this.props;
    const query = e.target.value;
    this.setState({query});
    if (searchAsYouType) {
      queryHook(query, this.search);
    }
  };

  onReset = () => {
    const {queryHook, searchAsYouType} = this.props;
    this.setState({
      query: '',
    }, () => {
      this.input.focus();
    });
    if (searchAsYouType) {
      queryHook('', this.search);
    }
  };

  search = query => {
    const {setQuery, search} = this.props;
    setQuery(query);
    search();
  };

  render() {
    const {
      theme,
      translations,
      autoFocus,
    } = this.props;
    const {query} = this.state;
    const th = themeable(theme);

    return (
      <form
        noValidate
        onSubmit={this.onSubmit}
        onReset={this.onReset}
        {...th('root', 'root')}
      >
        <div
          role="search"
          {...th('wrapper', 'wrapper')}
        >
          <input
            ref={this.onInputMount}
            type="search"
            placeholder={getTranslation(
              'placeholder',
              defaultTranslations,
              translations
            )}
            autoFocus={autoFocus}
            autoComplete={false}
            required
            value={query}
            onChange={this.onChange}
            {...th('input', 'input')}
          />
          <button
            type="submit"
            title={getTranslation(
              'submitTitle',
              defaultTranslations,
              translations
            )}
            {...th('submit', 'submit')}
          >
            {getTranslation('submit', defaultTranslations, translations)}
          </button>
          <button
            type="reset"
            title={getTranslation(
              'resetTitle',
              defaultTranslations,
              translations
            )}
            {...th('reset', 'reset')}
          >
            {getTranslation('reset', defaultTranslations, translations)}
          </button>
        </div>
      </form>
    );
  }
}

export default createSearchBox(SearchBox);

@@ -699,24 +699,134 @@
 Types.bool,%0A
+    focusShortcuts: PropTypes.arrayOf(%0A      PropTypes.oneOfType(%5BPropTypes.string, PropTypes.number%5D)%0A    ),%0A
     autoFocu
@@ -1200,24 +1200,48 @@
 dBy: false,%0A
+    focusShortcuts: %5B%5D,%0A
     autoFocu
@@ -1432,56 +1432,990 @@
 %0A%0A  
-onInputMount = input =%3E %7B%0A    this.input = input
+componentDidMount() %7B%0A    document.addEventListener('keydown', this.onKeyDown);%0A  %7D%0A%0A  componentWillUnmount() %7B%0A    document.removeEventListener('keydown', this.onKeyDown);%0A  %7D%0A%0A  onInputMount = input =%3E %7B%0A    this.input = input;%0A  %7D;%0A%0A  // From https://github.com/algolia/autocomplete.js/pull/86%0A  onKeyDown = e =%3E %7B%0A    if (!this.props.focusShortcuts) %7B%0A      return;%0A    %7D%0A%0A    const shortcuts = this.props.focusShortcuts.map(key =%3E%0A      typeof key === 'string' ? key.toUpperCase().charCodeAt(0) : key%0A    );%0A%0A    const elt = e.target %7C%7C e.srcElement;%0A    const tagName = elt.tagName;%0A    if (%0A      elt.isContentEditable %7C%7C%0A      tagName === 'INPUT' %7C%7C%0A      tagName === 'SELECT' %7C%7C%0A      tagName === 'TEXTAREA'%0A    ) %7B%0A      // already in an input%0A      return;%0A    %7D%0A%0A    const which = e.which %7C%7C e.keyCode;%0A    if (shortcuts.indexOf(which) === -1) %7B%0A      // not the right shortcut%0A      return;%0A    %7D%0A%0A    this.input.focus();%0A    e.stopPropagation();%0A    e.preventDefault()
 ;%0A  

Add focusShortcuts prop to SearchBox