import React, { PropTypes, Component } from 'react'
import { Button, Glyphicon, MenuItem } from 'react-bootstrap'
import { updateTargetForSubscription } from '../../manager/actions/user'
import { connect } from 'react-redux'

import { getComponentMessages, getMessage, getConfigProperty } from '../util/config'

class WatchButton extends Component {
  static propTypes = {
    componentClass: PropTypes.string,
    isWatching: PropTypes.bool,
    subscriptionType: PropTypes.string,
    target: PropTypes.string,
    user: PropTypes.object,
    updateTarget: PropTypes.func
  }

  _onToggleWatch = () => {
    const {updateTarget, user, target, subscriptionType} = this.props
    updateTarget(user.profile, target, subscriptionType)
  }

  render () {
    const {isWatching} = this.props
    const messages = getComponentMessages('WatchButton')
    const title = isWatching
      ? <span><Glyphicon glyph='eye-close' /> {getMessage(messages, 'unwatch')}</span>
      : <span><Glyphicon glyph='eye-open' /> {getMessage(messages, 'watch')}</span>
    if (!getConfigProperty('application.notifications_enabled')) {
      return null
    }
    if (this.props.componentClass === 'menuItem') {
      return (
        <MenuItem
          onClick={this._onToggleWatch}>
          {title}
        </MenuItem>
      )
    } else {
      // componentClass is presumed to be button
      return (
        <Button
          onClick={this._onToggleWatch}>
          {title}
        </Button>
      )
    }
  }
}

const mapDispatchToProps = {
  updateTarget: updateTargetForSubscription
}

const mapStateToProps = (state, ownProps) => ({})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(WatchButton)

@@ -572,16 +572,66 @@
 nc%0A  %7D%0A%0A
+  messages = getComponentMessages('WatchButton')%0A%0A
   _onTog
@@ -649,16 +649,16 @@
 () =%3E %7B%0A
-
     cons
@@ -787,17 +787,25 @@
 %0A%0A  
-render ()
+_getLabel = () =%3E
  %7B%0A 
@@ -847,104 +847,38 @@
     
-const messages = getComponentMessages('WatchButton')%0A    const title = isWatching%0A      ? %3Cspan%3E
+return (%0A      %3Cspan%3E%0A        
 %3CGly
@@ -894,22 +894,64 @@
 yph=
-'
+%7B%60
 eye-
-close' /%3E
+$%7BisWatching ? 'close' : 'open'%7D%60%7D /%3E%7B' '%7D%0A       
  %7Bge
@@ -951,32 +951,37 @@
     %7BgetMessage(
+this.
 messages, 'unwat
@@ -978,110 +978,189 @@
 es, 
-'unwatch')%7D%3C/span%3E%0A      : %3Cspan%3E%3CGlyphicon glyph='eye-open' /%3E %7BgetMessage(messages, 'watch')%7D%3C/span%3E
+isWatching ? 'unwatch' : 'watch')%7D%0A      %3C/span%3E%0A    )%0A  %7D%0A%0A  render () %7B%0A    const %7BcomponentClass%7D = this.props%0A    // Do not render watch button if notifications are not enabled.
 %0A   
@@ -1220,24 +1220,16 @@
 abled'))
- %7B%0A     
  return 
@@ -1241,47 +1241,44 @@
     
-%7D%0A    if (this.props.componentClass ===
+switch (componentClass) %7B%0A      case
  'me
@@ -1284,20 +1284,20 @@
 enuItem'
-) %7B%0A
+:%0A  
       re
@@ -1311,16 +1311,18 @@
         
+  
 %3CMenuIte
@@ -1323,16 +1323,18 @@
 enuItem%0A
+  
         
@@ -1372,32 +1372,47 @@
 %3E%0A          
-%7Btitle%7D%0A
+  %7Bthis._getLabel()%7D%0A  
         %3C/Me
@@ -1429,72 +1429,29 @@
     
-)%0A    %7D else %7B%0A      // componentClass is presumed to be button%0A
+  )%0A      default:%0A  
     
@@ -1473,16 +1473,18 @@
     
+  
 %3CButton%0A
     
@@ -1479,16 +1479,18 @@
 %3CButton%0A
+  
         
@@ -1536,16 +1536,31 @@
     
-%7Btitle%7D%0A
+  %7Bthis._getLabel()%7D%0A  
     
@@ -1573,16 +1573,18 @@
 Button%3E%0A
+  
       )%0A

refactor to use switch and static messages