hackathon

import React, { PropTypes, Component } from 'react';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import './App.css';

import BookSearch from './BookSearch';
import BookDetails from './BookDetails';
import GoogleMap from 'google-map-react';

const Layout = ({ children }) => (
  <div>{ children }</div>
);

// Replace this Uri with your GraphQL server Uri
const serverUri = 'http://localhost:5000/graphql';

const plumber = {
  background: 'url(./src/img/plumber.png)',
  backgroundSize: 'contain',
  width: '30px',
  height: '30px'
}


class MyGreatPlace extends Component {
  constructor(props) {
    super(props)

    this.state = {open: false};

    this.handleClick = this.handleClick.bind(this)
  }

  static propTypes = {
    text: PropTypes.string
  };

  handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    this.setState({open: !this.state.open})
  }

  render() {
    return (
      <div onClick={this.handleClick} style={plumber}>
        { this.props.text }
      </div>
    );
  }
}

// const toolTipStyles = {
//   position: 'absolute',
//   width: '50px',
//   height: '50px',
//   top: '-100px',
//   left: '30px',
//   background: 'navajo'
// }

// class Tooltip extends Component {
//   render () {
//     return (
//       <div style={toolTipStyles}>ToolTip</div>
//     )
//   }
// }

class Drawer extends Component {
  constructor(props) {
    super(props)
  }

  render () {
    console.log(this.props)

    return (
      <div style={
        {
          transition: 'width 0.5s ease',
          position: 'absolute',
          top: 0,
          right: 0,
          width: '200px',
          height: '100vh',
          background: 'mediumorchid'
        }
      }>
      </div>
    )
  }
}

class App extends Component {
  constructor(...args) {
    super(...args);

    const networkInterface = createNetworkInterface({
      uri: serverUri,
      opts: { cors: true },
    });

    this.handlePlumberClick = this.handlePlumberClick.bind(this)

    this.state = {
      open: false,
      id: null
    }

    this.client = new ApolloClient({
      networkInterface,

      // Our backend has unique IDs, so we should use them for cache consistency
      dataIdFromObject: r => r.id,
    });
  }

  handlePlumberClick (id) {
    this.setState({
      id: id,
      open: !this.state.open
    })
  }

  render() {
    return (
      <ApolloProvider client={this.client}>
        <div>
          <GoogleMap
            style={null}
            bootstrapURLKeys={{
              key: 'AIzaSyA877dUOx8E9Pt0wAaFUjULuKUGEiVJ8RM',
              language: 'en'
            }}
            defaultCenter={{lat: 42.360, lng: -71.0}}
            defaultZoom={9}
            onChildClick={this.handlePlumberClick}
          >
              <MyGreatPlace lat={59.955413} lng={30.337844} />
          </GoogleMap>
          {
            this.state.open &&
            <Drawer id={this.state.id} />
          }
          
        </div>
    </ApolloProvider>
    );
  }
}

export default App;