import Icon from '@conveyal/woonerf/components/icon'
import { divIcon } from 'leaflet'
import React, {PropTypes, Component} from 'react'
import { MenuItem, SplitButton } from 'react-bootstrap'
import {Marker, Popup} from 'react-leaflet'

export default class AddableStop extends Component {
  static propTypes = {
    activePattern: PropTypes.object,
    addStopToPattern: PropTypes.func,
    stop: PropTypes.object
  }

  _onClickAddStopToEnd = () => this.props.addStopToPattern(this.props.activePattern, this.props.stop)

  _onSelectStop = (key) => this.props.addStopToPattern(this.props.activePattern, this.props.stop, key)

  render () {
    const {
      activePattern,
      stop
    } = this.props
    const color = 'blue'
    const stopName = `${stop.stop_name} (${stop.stop_code ? stop.stop_code : stop.stop_id})`
    const transparentBusIcon = divIcon({
      html: `<span title="${stopName}" class="fa-stack" style="opacity: 0.3">
              <i class="fa fa-circle fa-stack-2x" style="color: #ffffff"></i>
              <i class="fa fa-bus fa-stack-1x" style="color: ${color}"></i>
            </span>`,
      className: '',
      iconSize: [24, 24]
    })
    return (
      <Marker
        position={[stop.stop_lat, stop.stop_lon]}
        icon={transparentBusIcon}>
        <Popup>
          <div style={{minWidth: '180px'}}>
            <h5>{stopName}</h5>
            <SplitButton
              title={<span><Icon type='plus' /> Add stop</span>}
              id={`add-stop-dropdown`}
              bsStyle='success'
              onSelect={this._onSelectStop}
              onClick={this._onClickAddStopToEnd}>
              <MenuItem
                value={activePattern.patternStops.length}
                eventKey={activePattern.patternStops.length}>
                Add to end (default)
              </MenuItem>
              {activePattern.patternStops && activePattern.patternStops.map((stop, i) => {
                const index = activePattern.patternStops.length - i
                return (
                  <MenuItem
                    value={index - 1}
                    eventKey={index - 1}
                    key={i}>
                    {index === 1 ? 'Add to beginning' : `Insert as stop #${index}`}
                  </MenuItem>
                )
              })}
            </SplitButton>
          </div>
        </Popup>
      </Marker>
    )
  }
}

@@ -142,31 +142,34 @@
 rt %7B
- MenuItem, SplitButton 
+Button, Dropdown, MenuItem
 %7D fr
@@ -452,47 +452,94 @@
  =%3E 
-this.props.addStopToPattern(this.props.
+%7B%0A    const %7BactivePattern, addStopToPattern, stop%7D = this.props%0A    addStopToPattern(
 acti
@@ -553,24 +553,17 @@
 rn, 
-this.props.
 stop)
+%0A  %7D
 %0A%0A  
@@ -586,16 +586,43 @@
 (key) =%3E
+ %7B%0A    console.log(key)%0A   
  this.pr
@@ -689,16 +689,20 @@
 op, key)
+%0A  %7D
 %0A%0A  rend
@@ -1238,16 +1238,76 @@
 %0A    %7D)%0A
+    // TODO: Refactor to share code with PatternStopButtons%0A
     retu
@@ -1519,84 +1519,16 @@
    %3C
-SplitButton%0A              title=%7B%3Cspan%3E%3CIcon type='plus' /%3E Add stop%3C/span%3E%7D
+Dropdown
 %0A   
@@ -1581,25 +1581,17 @@
     
-bsStyle='success'
+pullRight
 %0A   
@@ -1630,16 +1630,17 @@
 ectStop%7D
+%3E
 %0A       
@@ -1650,45 +1650,323 @@
     
-onClick=%7Bthis._onClickAddStopToEnd%7D%3E%0A
+%3CButton%0A                bsStyle='success'%0A                onClick=%7Bthis._onClickAddStopToEnd%7D%3E%0A                %3CIcon type='plus' /%3E Add stop%0A              %3C/Button%3E%0A              %3CDropdown.Toggle%0A                bsStyle='success' /%3E%0A              %3CDropdown.Menu style=%7B%7BmaxHeight: '200px', overflowY: 'scroll'%7D%7D%3E%0A  
     
@@ -1977,32 +1977,34 @@
       %3CMenuItem%0A
+  
                 
@@ -2053,32 +2053,34 @@
                 
+  
 eventKey=%7Bactive
@@ -2125,16 +2125,18 @@
         
+  
 Add to e
@@ -2154,32 +2154,34 @@
 )%0A              
+  
 %3C/MenuItem%3E%0A    
@@ -2190,16 +2190,18 @@
         
+ 
+ 
 %7BactiveP
@@ -2281,24 +2281,26 @@
             
+  
 const index 
@@ -2351,24 +2351,26 @@
             
+  
 return (%0A   
@@ -2362,24 +2362,26 @@
    return (%0A
+  
             
@@ -2412,24 +2412,26 @@
             
+  
 value=%7Bindex
@@ -2428,32 +2428,34 @@
 lue=%7Bindex - 1%7D%0A
+  
                 
@@ -2499,16 +2499,18 @@
         
+  
 key=%7Bi%7D%3E
@@ -2530,16 +2530,18 @@
         
+ 
+ 
 %7Bindex =
@@ -2606,32 +2606,34 @@
                 
+  
 %3C/MenuItem%3E%0A    
@@ -2644,18 +2644,22 @@
         
-)%0A
+  )%0A  
         
@@ -2684,20 +2684,48 @@
     
-%3C/SplitButto
+  %3C/Dropdown.Menu%3E%0A            %3C/Dropdow
 n%3E%0A 

fix height/scroll issue for addable stop dropdown