content: import React from 'react'
  import { render } from 'react-dom'
  import Autocomplete from './Autocomplete'
  require('../assets/stylesheets/index.scss');
  require('../assets/stylesheets/custom.scss');
  
  
  const App = React.createClass({
    getInitialState() {
      return { theme: 'custom' }
    },
    autocompleteCallback(v, autocomplete) {
      const [googleLocationAutocomplete, request] = [new google.maps.places.AutocompleteService(), { input: v, types: ['(cities)'] }]
      googleLocationAutocomplete.getPlacePredictions(request, (predictions) => {
        const data = predictions ? predictions.map(function(prediction){ return prediction.description; }) : [];
        autocomplete.setState({items: data});
      })
    },
    handleChangeTheme(e) {
      e.preventDefault();
      this.setState({ theme: e.target.dataset.theme });
    },
    render() {
      return <div className="content">
        <section className="intro">
          <div className="title">Remontant - React Autocomplete</div>
          <div className="subtitle"><a data-theme="custom" onClick={this.handleChangeTheme}>Custom</a> |
            {' '}<a data-theme="materialize" onClick={this.handleChangeTheme}>Materialize</a> |
            {' '}<a data-theme="bootstrap" onClick={this.handleChangeTheme}>Bootstrap</a> |
            {' '}<a data-theme="foundation" onClick={this.handleChangeTheme}>Foundation</a>
          </div>
          <div className="input-container">
            <Autocomplete callback={this.autocompleteCallback} theme={this.state.theme} className={`autocomplete-${this.state.theme}`} placeholder="Search a city"/>
          </div>
        </section>
      </div>;
    }
  });
  
  render(<App />, document.querySelector(".app"));
  