var React = require('react'),
    Router = require('react-router');

var NavigationActions = require('../../actions/navigationActions');
var SearchActions = require('../../actions/searchActions');
var SearchStore = require('../../stores/searchStore');

var SearchBox = React.createClass({
    getInitialState: function() {
        return SearchStore.getSearchBoxState();
    },
    onSearchClick: function(e) {
        this.doSearch();
        e.preventDefault();
    },
    componentDidMount: function() {
        SearchStore.addChangeListener(this.onSearchStoreChange);
    },
    componentWillUnmount: function() {
        SearchStore.removeChangeListener(this.onSearchStoreChange);
    },
    onSearchStoreChange: function() {
        if(this.isMounted()) {
            this.setState(SearchStore.getSearchBoxState());
        }
    },
    onSearchBoxChange: function(e) {
        SearchActions.searchBoxChange(e.currentTarget.value);
    },
    doSearch: function() {
        if(this.state.q.trim() !== '') {
            NavigationActions.goToSearchResults(this.state.q);
        }
    },
    onKeyPress: function(e) {
        var enterKeyCode = 13;
        var whichKey = e.key || e.which;
        if(whichKey == enterKeyCode) {
            this.doSearch();
            e.preventDefault();
        }
    },
    render: function() {
        var large = (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
        <div className="left-inner-addon">
            <i className="glyphicon glyphicon-search"></i>
              <input style={{width: '75%'}} type="search" onKeyPress={this.onKeyPress}
                className="search-box form-control"
                value={this.state.q} onChange={this.onSearchBoxChange}
                    aria-hidden="true">

               </input>

             <button className="btn btn-default search-button" type="button"
               onClick={this.onSearchClick}>Traži</button>

        </div>
    </form>);

       var small = (<form  className="form-inline">
        <span className="left-inner-addon">
            <i style={{positon: "absolute", zIndex: "600" }} className="glyphicon glyphicon-search"></i>
              <input style={{ width: "100%"}} type="search" onKeyPress={this.onKeyPress}
                className="search-box form-control"
                value={this.state.q} onChange={this.onSearchBoxChange}
                    aria-hidden="true">

               </input>
        </span>
    </form>); 

       if (this.props.small === 'true') {
           return small; 
        }
        else {
           return large;
        }
    }
}
);

module.exports = SearchBox;