import React, { Component } from "react";
import MediaEndpoints from "../lib/media_endpoints.js";
import ResultItem from "./ResultItem";

const titleCase = (string) => string[0].toUpperCase() + string.slice(1);

let endpoints = new MediaEndpoints();

let lastSearch;

export default class Searchbox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      results: [],
      selectedIndex: 0
    }
  }
  navigateDropdown(keyName) {
    let currentIndex = this.state.selectedIndex;
    let selectedIndex = currentIndex;
    if (keyName === 'ArrowUp') {
        selectedIndex = Math.max(currentIndex - 1, 0);
    } else {
        selectedIndex = Math.min(currentIndex + 1, this.state.results.length - 1);
    }
    this.setState({ selectedIndex });
  }

  captureArrowKeys(event) {
    // console.log(event.key);
    switch (event.key) {
      case 'ArrowUp': case 'ArrowDown':
        event.preventDefault();
        this.navigateDropdown(event.key);
        break;

      case 'Enter':
        event.preventDefault();
        if (this.state.results[this.state.selectedIndex]) {
          this.resultClicked(this.state.results[this.state.selectedIndex]);
        }
        break;

      case 'Escape':
        this.showResults(false);
        break;

      default:
        let query = React.findDOMNode(this.refs.query).value;
        this.searchMedia(query);
    }
  }
  showResults(show) {
    this.setState({ show });
  }
  _submitForm(e) {
    e.preventDefault();
    let query = React.findDOMNode(this.refs.query).value;
    let urlResults = endpoints.urlToMediaItem(query);

    if (urlResults.length > 0) {
      let [result] = urlResults;
      this.resultClicked(result);
      return;
    } else {
      this.searchMedia(query);
    }
  }
  searchMedia(query) {
    if (query === lastSearch) {
      return;
    }
    lastSearch = query;
    const {searchSource, activeFeedId} = this.props

    if (!query || activeFeedId === 'playlists') {
      this.setState({results: []});
      return;
    }

    endpoints['search_' + searchSource](query).then((results) => {
      this.setState({ results, selectedIndex: 0, showResults: true });
    }).catch(err => { throw err; });
  }

  resultClicked(result) {
    this.props.addItem(result);
    React.findDOMNode(this.refs.query).blur();
  }

  searchPlaceholder() {
    const {searchSource, activeFeedId} = this.props
    if (activeFeedId === 'playlists') {
      return "Enter playlist URL"
    }
    switch (searchSource) {
      case "spotify":
        return "Search for tracks on Spotify";
      case "soundcloud":
        return "Search for tracks on SoundCloud";
      case "youtube":
        return "Search for YouTube videos";
      default:
        return "Search for videos or music";
    }
  }
  render() {
    const { show, results, selectedIndex } = this.state;
    const { onToggleButton, activeFeedId, searchSource, onSelectSource } = this.props
    const hidden = activeFeedId !== 'tracks'
    const options = ["spotify", "youtube", "soundcloud"]

    return (
      <div className="search-form">
        <form onSubmit={this._submitForm.bind(this)}>
          <select ref="type" style={{'visibility': hidden ? 'hidden' : ''}} value={searchSource} onChange={(event) => onSelectSource(event.target.value)} className={'search-type-select match-' + searchSource}>
            {options.map((value) =>
              (<option key={value} value={value}>{value}</option>)
            )}
          </select>
          <input ref="query" type="search" onKeyUp={this.captureArrowKeys.bind(this)} onBlur={() => setTimeout(() => this.showResults(false), 1000) } onFocus={() => this.showResults(true)} id="insert_video" />
          <br/>
          {show && results.length && (
            <div className="results-container">
              <ul className="results-list" ref="resultsList">
                {results.map((result, index) =>
                  (<ResultItem key={result.id} onClick={this.resultClicked.bind(this)} setSelectedNode={this.setSelectedNode} selected={index === selectedIndex} result={result} />)
                )}
              </ul>
            </div>
          )}
        </form>
        <button onClick={onToggleButton}>{titleCase(activeFeedId)}</button>
      </div>
    );
  }
}

@@ -480,84 +480,83 @@
     
-let currentIndex = this.state.selectedIndex;%0A    let selectedIndex = current
+const %7B selectedIndex, results %7D = this.state;%0A    let nextIndex = selected
 Inde
@@ -595,32 +595,28 @@
 ) %7B%0A        
-selected
+next
 Index = Math
@@ -620,23 +620,24 @@
 ath.max(
-current
+selected
 Index - 
@@ -660,32 +660,28 @@
 e %7B%0A        
-selected
+next
 Index = Math
@@ -689,15 +689,16 @@
 min(
-current
+selected
 Inde
@@ -704,27 +704,16 @@
 ex + 1, 
-this.state.
 results.
@@ -764,16 +764,27 @@
 tedIndex
+: nextIndex
  %7D);%0A  %7D

Rename variable