import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import graph from 'fb-react-sdk';


const MyMapComponent = withScriptjs(withGoogleMap((props) =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 50.692241, lng: 21.717988 }}
    >
        {props.isMarkerShown && <Marker position={{ lat: 50.692241, lng: 21.717988 }} />}
    </GoogleMap>
));

class App extends Component {

    constructor(props){
        super(props);
        //this.state={inputfield: "no value"};
        this.handleClick = this.handleClick.bind(this);
        this.updateInputValue = this.updateInputValue.bind(this);
        this.state = {someText: '', facebookRes: ''};
        this.key = "AIzaSyDadl5Hoa2T8bAD6J0RzD9ytwJQPS35tN4";
        this.googleUrl = "https://maps.googleapis.com/maps/api/js?key=" + this.key + "&v=3.exp&libraries=geometry,drawing,places";
        this.access_token = "EAACEdEose0cBAEyYNzcxZBIkXy0eltUZBSJabPBhZAWORuSfOT1HZCgtgPVCBS6imkE4AcrpMACRRxs4U7WpBl1aMDuHvdISP8B65xzP2fdvZBYYZBjT0OZCFSR7DxYtGfa2UqZAjRwUlOV7WdC72FPogHmqwVA8EFz8LztjIRMeMHriqmAiu3ZCDcpseqj2b0CBc8oeyYHXMRQZDZD";
        graph.setAccessToken(this.access_token);
    }

    handleClick(){
        console.log("trying to add picture url");
        console.log("value of input field : "+ this.state.addpixinputfield);
        this.y = "res";
        var search = "search?q=" + this.state.addpixinputfield + "&type=place";

        graph.get(search, function (err, res) {       //a dopiero potem to :(
            console.log("in graph get: " + res.data[0]["name"]);
            this.state = {x: res.data[0]["name"]};
        });

        console.log(this.state.x);          //najpierw się robi to
        this.setState({someText: this.state.addpixinputfield, facebookRes:  this.state.x});
    }

    updateInputValue(evt){
        this.state={addpixinputfield: evt.target.value};
    }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          hej, Olnique
        </p>

          <div>
              <input type="text" id="addpixinputfield" placeholder="Search..." onChange={this.updateInputValue} />
              <input type="button" value="ok" id="addpix" onClick={this.handleClick}/>
              <p>
                  {this.state.someText}
              </p>
              <p>
                  {this.state.facebookRes}
              </p>
          </div>
          <MyMapComponent
              isMarkerShown
              googleMapURL={this.googleUrl}
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `400px` }} />}
              mapElement={<div style={{ height: `100%` }} />}
          />
      </div>
    );
  }
}

export default App;