import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { FeatureGroup, Marker, Popup } from 'react-leaflet'
import { divIcon } from 'leaflet'

import { bikeRentalQuery } from '../../actions/api'

class BikeRentalOverlay extends Component {
  static propTypes = {
    queryMode: PropTypes.string,
    stations: PropTypes.array,
    refreshStations: PropTypes.func
  }

  _startRefreshing () {
    // ititial station retrieval
    this.props.refreshStations()

    // set up timer to refresh stations periodically
    this._refreshTimer = setInterval(() => {
      this.props.refreshStations()
    }, 30000) // defaults to every 30 sec. TODO: make this configurable?*/
  }

  _stopRefreshing () {
    if (this._refreshTimer) clearInterval(this._refreshTimer)
  }

  componentDidMount () {
    if (this.props.visible) this._startRefreshing()
  }

  componentWillUnmount () {
    this._stopRefreshing()
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.visible && nextProps.visible) {
      this._startRefreshing()
    } else if (this.props.visible && !nextProps.visible) {
      this._stopRefreshing()
    }
  }

  render () {
    const { stations } = this.props

    if (!stations || stations.length === 0) return <FeatureGroup />

    return (
      <FeatureGroup>
        {stations.map((station) => {
          let icon
          if (station.isFloatingBike) {
            icon = divIcon({
              iconSize: [24, 24],
              iconAnchor: [12, 24],
              popupAnchor: [0, -12],
              html: `<div class="bike-rental-hub-icon bike-rental-out-of-hub"></div>`,
              className: ''
            })
          } else {
            const pctFull = station.bikesAvailable / (station.bikesAvailable + station.spacesAvailable)
            const i = Math.round(pctFull * 9)
            icon = divIcon({
              iconSize: [24, 24],
              iconAnchor: [12, 24],
              popupAnchor: [0, -12],
              html: `<div class="bike-rental-hub-icon bike-rental-hub-icon-${i}"></div>`,
              className: ''
            })
          }
          return (
            <Marker
              icon={icon}
              key={station.id}
              position={[station.y, station.x]}
            >
              <Popup>
                {station.isFloatingBike
                  ? <span>
                    <b>Floating bike: {station.name}</b>
                  </span>
                  : <span>
                    <b>{station.name}</b><br />
                    Available bikes: {station.bikesAvailable}<br />
                    Available docks: {station.spacesAvailable}<br />
                  </span>
                }
              </Popup>
            </Marker>
          )
        })}
      </FeatureGroup>
    )
  }
}

// connect to the redux store

const mapStateToProps = (state, ownProps) => {
  return {
    stations: state.otp.overlay.bikeRental.stations
  }
}

const mapDispatchToProps = {
  refreshStations: bikeRentalQuery
}

export default connect(mapStateToProps, mapDispatchToProps)(BikeRentalOverlay)

@@ -229,16 +229,109 @@
 ons/api'
+%0Aimport SetFromToButtons from './set-from-to'%0Aimport %7B setLocation %7D from '../../actions/map'
 %0A%0Aclass 
@@ -2421,58 +2421,180 @@
     
-%7Bstation.isFloatingBike%0A                  ? %3Cspan%3E
+%3Cdiv%3E%0A                  %7B/* Popup title */%7D%0A                  %3Cdiv style=%7B%7B fontSize: 18, fontWeight: '500', marginBottom: 6 %7D%7D%3E%0A                    %7Bstation.isFloatingBike
 %0A   
@@ -2610,18 +2610,25 @@
         
-%3Cb
+  ? %3Cspan
 %3EFloatin
@@ -2655,11 +2655,16 @@
 e%7D%3C/
-b%3E%0A
+span%3E%0A  
     
@@ -2669,32 +2669,56 @@
                 
+  : %3Cspan%3E%7Bstation.name%7D
 %3C/span%3E%0A        
@@ -2731,63 +2731,172 @@
     
-: %3Cspan%3E%0A                    %3Cb%3E%7Bstation.name%7D%3C/b%3E%3Cbr /
+  %7D%0A                  %3C/div%3E%0A%0A                  %7B/* Details */%7D%0A                  %7B!station.isFloatingBike && (%0A                    %3Cdiv style=%7B%7B marginBottom: 8 %7D%7D
 %3E%0A  
@@ -2905,32 +2905,39 @@
                 
+ 
+ %3Cdiv%3E
 Available bikes:
@@ -2954,36 +2954,36 @@
 bikesAvailable%7D%3C
-br /
+/div
 %3E%0A              
@@ -2988,16 +2988,23 @@
         
+  %3Cdiv%3E
 Availabl
@@ -3042,38 +3042,439 @@
 le%7D%3C
-br /%3E%0A                  %3C/span
+/div%3E%0A                    %3C/div%3E%0A                  )%7D%0A%0A                  %7B/* Set as from/to toolbar */%7D%0A                  %3CSetFromToButtons%0A                    map=%7Bthis.context.map%7D%0A                    location=%7B%7B%0A                      lat: station.y,%0A                      lon: station.x,%0A                      name: station.name%0A                    %7D%7D%0A                    setLocation=%7Bthis.props.setLocation%7D%0A                  /
 %3E%0A  
@@ -3479,33 +3479,38 @@
                 
-%7D
+%3C/div%3E
 %0A              %3C
@@ -3775,16 +3775,16 @@
 ops = %7B%0A
-
   refres
@@ -3809,16 +3809,31 @@
 talQuery
+,%0A  setLocation
 %0A%7D%0A%0Aexpo

Add "Set From/To" links to bikeshare overlay popup