import axios from 'axios';
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { Redirect } from '@reach/router';

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
    };

    this.submit = this.submit.bind(this);
    this.changeTerm = this.changeTerm.bind(this);
  }

  changeTerm(event) {
    this.setState({ term: event.target.value });
  }

  submit(event) {
    let url = 'https://example.com/wp-json/wp/v2/posts?_embed&search=' + encodeURI(this.state.term) + '&per_page=100';
    axios.get(url)
      .then(response => {
        let data = {
          results: response.data,
        };
        this.setState(data);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit} action="search/results">
          <input onChange={this.changeTerm} />
          <Button type="submit" bsStyle="primary">Find</Button>
        </form>
        {this.state.results.length > 0 &&
          <Redirect to={{
            pathname: '/search/results',
            state: { results: this.state.results }
          }} />
        }
      </div>
    );
  }
}

export default Search;