/*
INDEX JS FILE
*/

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

import SearchBar from './search-bar';
import GoogleMapComponent from './google-map';

class App extends Component {
  render() {
  return (
      <div>
        <SearchBar />
        <GoogleMapComponent />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

/*
SEARCHBAR JS
*/

import React, { Component } from 'react';

import fetchData from './fetch-data';

import EventEmitter from './EventEmitter';

class SearchBar extends Component {
  constructor() {
    super();
    this.state = {search: ''};
    this.changeHandle = this.changeHandle.bind(this);
    this.submitHandle = this.submitHandle.bind(this);
  }

  changeHandle(event) {
    this.setState({search: event.target.value});
  }

  submitHandle(event) {
    event.preventDefault();

    fetchData(this.state.search).then((response) => {
      const locationData = {
        lat: response.data.results[0].geometry.location.lat,
        lng: response.data.results[0].geometry.location.lng
      };
      EventEmitter.dispatch('locationChanged', locationData);
    });
  }

  render() {
    return (
      <form onSubmit={this.submitHandle} className="input-group">
        <input
          placeholder="Type the name of a city or a country"
          className="form-control"
          value={this.state.search}
          onChange={this.changeHandle}
          />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Submit</button>
        </span>
      </form>
    );
  }

}

export default SearchBar;

/*
GOOGLE-MAP JS
*/
import React, {Component} from 'react';
import {GoogleMapLoader, GoogleMap} from "react-google-maps";
import EventEmitter from './EventEmitter';


class GoogleMapComponent extends Component {
  constructor() {
    super();
    this.state = {
      loc: {lat: 50, lng: 40}
    }
  }

  render() {

    EventEmitter.subscribe('locationChanged', (data) => {
      //this.setState({loc: data});
      console.log(this.state.loc);
    });

    return (
      <GoogleMapLoader
        containerElement = { <div style={{ height: '60%' }} /> }
        googleMapElement = {
          <GoogleMap defaultZoom = {12} defaultCenter = {this.state.loc} />
        }
      />
  );

  };
};


export default GoogleMapComponent;

/*
EVENT EMITTER
*/

const EventEmitter = {
    _events: {},
    dispatch: function (event, data) {
        if (!this._events[event]) return; // no one is listening to this event
        for (var i = 0; i < this._events[event].length; i++)
            this._events[event][i](data);
    },
    subscribe: function (event, callback) {
      if (!this._events[event]) this._events[event] = []; // new event
      this._events[event].push(callback);
    }
}

export default EventEmitter;