import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";
import { SearchInput, SearchResultsList } from "../../application-controls";
import _ from "lodash";

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIdx: null,
      currentVal: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.fireSearch = this.fireSearch.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.debouncedSearch = _.debounce(this.fireSearch, 200);
  }

  handleItemClick(item) {
    const { doSearchSelectItem } = this.props;
    doSearchSelectItem(item);
    this.handleChange("");
  }

  handleChange(val) {
    const { doSearchSetQuery } = this.props;
    this.setState({ selectedIdx: null , currentVal: val });
    doSearchSetQuery(val);
    if (val.length < 3){
      return null;
    }
    else{
      this.debouncedSearch();
    } 
  }

  fireSearch() {
    const { doSearchShouldFire } = this.props;
    doSearchShouldFire(this.state.currentVal);
  }

  handleKeyUp(e) {
    const { searchResults } = this.props;
    let { selectedIdx } = this.state;
    switch (e.keyCode) {
      case 40:
        if (selectedIdx === null) {
          selectedIdx = 0;
        } else if (selectedIdx < searchResults.length - 1) {
          selectedIdx++;
        }
        this.setState({
          selectedIdx: selectedIdx
        });
        break;
      case 38:
        if (selectedIdx > 0) selectedIdx--;
        this.setState({
          selectedIdx: selectedIdx
        });
        break;
      case 13:
        if (selectedIdx !== null)
          this.handleItemClick(searchResults[selectedIdx]);
        break;
      default:
        break;
    }
  }

  render() {
    const { selectedIdx, currentVal} = this.state;
    const { theme, searchResults, searchQueryString  } = this.props;
    const emptyArry = [];
    let optSearchResults = currentVal < 2 ? emptyArry : searchResults
    const containerClass = classnames({
      [theme]: true,
      "cm-btn-group": true
    });
    return (
      <div>
        <div
          className={containerClass}
          style={{
            width: "250px",
            position: "relative",
            paddingLeft: "10px",
            paddingRight: "10px"
          }}
        >
          <SearchInput
            inline={true}
            onKeyUp={this.handleKeyUp}
            onUpdate={this.handleChange}
            filterString={searchQueryString}
            placeholder="Location Search..."
          ></SearchInput>
        </div>
        <SearchResultsList
          ref={el => {
            this.searchResultsList = el;
          }}
          onItemClick={this.handleItemClick}
          items={optSearchResults}
          selectedIdx={selectedIdx}
        />
      </div>
    );
  }
}

export default connect(
  "doSearchSelectItem",
  "doSearchShouldFire",
  "doSearchSetQuery",
  "selectTheme",
  "selectSearchQueryString",
  "selectSearchResults",
  SearchBar
);
