"use strict"

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Input, Grid, Row, Col, Button } from 'react-bootstrap'
import { observer } from 'mobx-react'
import { store } from '../store'
import {
  Map,
  Logo,
  Search,
  getBounds,
  NorthArrow,
  TitlView,
  ZoomIn,
  ZoomOut,
  Options,
  Checkout,
  BoundingBox } from '../components'

@observer
export default class App extends Component {
  constructor(props) {
    super(props)
    this.handleSearchClick = this.handleSearchClick.bind(this)
    this.handleOrientation = this.handleOrientation.bind(this)
    this.state = {
      orientation: 1
    }
  }

  handleOrientation(orientation) {
    this.setState({
      orientation: orientation
    })
  }

  handleSearchClick(geometry) {
    let bounds = getBounds(geometry)
    this.setState({
      geometry: geometry,
      bounds: bounds
    })
    window.map.fitBounds(bounds)
  }

  render() {
    const styles = {
      'container': {
      },
      'left': {
        height: store.height,
        padding: 0,
        margin: 0
      },
      'right': {
        overflowY: 'auto',
        padding: 0,
        paddingBottom: '50px'
      }
    }
    return (
      <Grid fluid={true} className={ 'background' } style={ styles.container }>
        <Row style={styles.row}>

          { /* Map */ }
          <Col xs={12} sm={8} md={9} lg={10} style={ styles.left }>
            <Map bounds={ this.state.bounds }>
              <BoundingBox orientation={ this.state.orientation }/>
              <NorthArrow />
              <TitlView />
              <ZoomIn />
              <ZoomOut />
            </Map>
            <Search onClick={ this.handleSearchClick }/>
            <Logo />
          </Col>

          { /* Options */ }
          <Col xs={12} sm={4} md={3} lg={2} style={styles.right}>
            <Options handleOrientation={ this.handleOrientation } />
            <Checkout />
          </Col>
        </Row>
      </Grid>
    )
  }
}

@@ -472,463 +472,12 @@
 ps)%0A
-    this.handleSearchClick = this.handleSearchClick.bind(this)%0A    this.handleOrientation = this.handleOrientation.bind(this)%0A    this.state = %7B%0A      orientation: 1%0A    %7D%0A  %7D%0A%0A  handleOrientation(orientation) %7B%0A    this.setState(%7B%0A      orientation: orientation%0A    %7D)%0A  %7D%0A%0A  handleSearchClick(geometry) %7B%0A    let bounds = getBounds(geometry)%0A    this.setState(%7B%0A      geometry: geometry,%0A      bounds: bounds%0A    %7D)%0A    window.map.fitBounds(bounds)%0A
   %7D%0A
+
 %0A  r
@@ -977,104 +977,37 @@
 %3CMap
- bounds=%7B this.state.bounds %7D%3E%0A              %3CBoundingBox orientation=%7B this.state.orientation %7D
+%3E%0A              %3CBoundingBox 
 /%3E%0A 
@@ -1155,42 +1155,8 @@
 rch 
-onClick=%7B this.handleSearchClick %7D
 /%3E%0A 
@@ -1287,16 +1287,16 @@
 right%7D%3E%0A
+
         
@@ -1311,53 +1311,8 @@
 ions
- handleOrientation=%7B this.handleOrientation %7D
  /%3E%0A

Remove func & vars