import React from 'react';
import { Map, Polyline, TileLayer } from 'react-leaflet';
import walks from './walks';

const position = [52.45, 13.30];

class Walk extends React.Component {
  constructor() {
    super();
    this.state = {
      hover: false
    };
  }
  handleMouseOver() {
    this.setState({ hover: true });
  }
  handleMouseOut() {
    this.setState({ hover: false });
  }
  render() {
    return (
      <div>
        <Polyline
          className={this.state.hover ? 'hover' : ''}
          positions={this.props.positions} />
        <Polyline
          className='hidden'
          positions={this.props.positions}
          onMouseOver={() => this.handleMouseOver()}
          onMouseOut={() => this.handleMouseOut()}
        />
      </div>
    );
  }
}

function distance(walks) {
  return walks.map(function(walk) {
    return walk.distance;
  }).reduce(function(x, y) {
    return x + y;
  }, 0);
}


const TILE_URL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
const TILE_ATTRIBUTION =
  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
  ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
  ' Imagery © <a href="http://mapbox.com">Mapbox</a>';
const ACCESS_TOKEN =
  'pk.eyJ1IjoiY3JlcGVscyIsImEiOiJjaXdheGxpdTcwMDF2MnpvNmNucDhrdnN0In0.WiXElc_RJUWKB_CFqssrBA';
const TILE_ID = 'mapbox.outdoors';

class WalksMap extends React.Component {
  render() {
    const walkObjects = walks.map((walk, i) => <Walk positions={walk.path} key={i}/>);
    const totalDistance = distance(walks);
    const totalWalks = walks.length;

    const walk = walks[0];

    return (
      <div>
        <Map id='mapid' center={position} zoom={9}>
          <TileLayer
            url={TILE_URL}
            attribution={TILE_ATTRIBUTION}
            accessToken={ACCESS_TOKEN}
            id={TILE_ID}
          />
          {walkObjects}
        </Map>
        <div id='overlays'>
          <div className='global-info'>
            <div className='title'>Berlin Walks</div>
            <div className='distance'>{totalDistance} km on {totalWalks} walks</div>
          </div>
      <div className='walk-details'>
          <div className='walk-header'>
            <div className='title'>{walk.title}</div>
            <div className='info'>
              <span className='date'>{walk.date}</span>
              &nbsp;–&nbsp;
              <span className='distance'>{walk.distance} km</span>
              &nbsp;–&nbsp;
              <span className='participants'>{walk.participants.length} walkers</span>
            </div>
          </div>
      </div>
        </div>
      </div>
    );
  }
}

export default WalksMap;

@@ -1460,16 +1460,99 @@
 onent %7B%0A
+  constructor() %7B%0A    super();%0A%0A    this.state = %7B%0A      walk: walks%5B0%5D%0A    %7D;%0A  %7D%0A
   render
@@ -1552,24 +1552,24 @@
  render() %7B%0A
-
     const wa
@@ -1728,36 +1728,8 @@
 h;%0A%0A
-    const walk = walks%5B0%5D;%0A%0A
     
@@ -2234,24 +2234,28 @@
 /div%3E%0A      
+    
 %3Cdiv classNa
@@ -2275,32 +2275,34 @@
 ils'%3E%0A          
+  
 %3Cdiv className='
@@ -2315,16 +2315,18 @@
 eader'%3E%0A
+  
         
@@ -2349,24 +2349,35 @@
 me='title'%3E%7B
+this.state.
 walk.title%7D%3C
@@ -2386,32 +2386,34 @@
 iv%3E%0A            
+ 
+ 
 %3Cdiv className='
@@ -2415,24 +2415,26 @@
 ame='info'%3E%0A
+  
             
@@ -2455,24 +2455,35 @@
 ame='date'%3E%7B
+this.state.
 walk.date%7D%3C/
@@ -2494,32 +2494,34 @@
 %3E%0A              
+ 
+ 
 &nbsp;%E2%80%93&nbsp;%0A  
@@ -2510,32 +2510,34 @@
   &nbsp;%E2%80%93&nbsp;%0A
+  
               %3Cs
@@ -2562,16 +2562,27 @@
 tance'%3E%7B
+this.state.
 walk.dis
@@ -2604,32 +2604,34 @@
 %3E%0A              
+ 
+ 
 &nbsp;%E2%80%93&nbsp;%0A  
@@ -2620,32 +2620,34 @@
   &nbsp;%E2%80%93&nbsp;%0A
+  
               %3Cs
@@ -2675,17 +2675,47 @@
 ipants'%3E
-%7B
+%0A                  %7Bthis.state.
 walk.par
@@ -2739,22 +2739,60 @@
  walkers
-%3C/span
+%0A                %3C/span%3E%0A              %3C/div
 %3E%0A      
@@ -2796,32 +2796,32 @@
          %3C/div%3E%0A
+
           %3C/div%3E
@@ -2817,37 +2817,24 @@
      %3C/div%3E%0A
-      %3C/div%3E%0A
         %3C/di

move walk into state