//List view
//
class List extends React.Component {
    constructor(props){
        super(props);
        this.test = this.test.bind(this);
        this.state = {
            params: "",
            searchResults: [],
            recipeName: [],
            desc: [],
            UID: []
        }
    }

    componentDidMount () {
        console.log("getting");
        $.ajax ({
          method: 'GET',
          url: "http://localhost:3333/search/" + this.props.location.query.q,
          success: (data) => {
            console.log(data);
            this.setState({searchResults: data[0]});
            for (var i = 0; i < data[0].length; i++) {
                this.setState({recipeName: this.state.recipeName.concat(data[0][i]['recipeName'])});
                this.setState({UID: this.state.UID.concat(data[0][i]['UID'])});
                this.setState({desc: this.state.desc.concat(data[0][i]['shortDesc'])});
            }

          }
        });
    }
    test (e) {
        if ( e.key == "Enter") {
            console.log(this.refs.searchBar.state.searchBar);
            console.log(this.props);
            this.setState({
                params: "-"
            });


        }
    }
    render() {
        return(
            <div id="testDIV" onKeyPress={this.test}>
                <HeaderMenu ref="searchBar"/>
                <RenderArray results={this.state.searchResults}/>
            </div>
            );
    }

}


//HeaderMenu component
//
class HeaderMenu extends React.Component{
    constructor(props) {
        super (props);
        this.onChange = this.onChange.bind(this);
        this.onKeyPress = this.onKeyPress.bind(this);
        this.searchGo = this.searchGo.bind(this);
        this.state = {
            searchBar: "",
            DropdownName: "Menu",
            subNames: ["Recipes", "Categories"],
            subLinks: ["/list", "/index"]
        };
    }
    onKeyPress (e) {
        if ( e.key == "Enter") {
            console.log("Enter is pressed");
            this.searchGo();

        }
    };
    searchGo (e) {
        console.log(this.state.searchBar);

        var pathname = '/list/';
        var query = {
            q: this.state.searchBar
        };
        hashHistory.push({pathname, query}); //Endres til browserHistory når siden deployes
    }


    onChange (e) {
        var t = {};
        var id = e.target.id
        t[id] = e.target.value
        this.setState(t);
    };

    render(){
        return(
            <div onClick={this.handleBodyClick}>
                <ul className="headerBar">
                    <li className="liSearchBar"><button  id="searchButton" onClick={this.searchGo}>Go!</button></li>
                    <li className="liSearchBar"><input type="text" className="searchBar" id="searchBar" placeholder="Search" onChange={this.onChange} onKeyPress={this.onKeyPress}/></li>

                </ul>

            </div>
        );
    }

}