import React, {PropTypes} from 'react'
import classnames from 'classnames'
import OnClickOutside from 'shared/components/OnClickOutside'

import autoRefreshItems from 'hson!shared/data/autoRefreshes.hson'

const {number, func} = PropTypes

const AutoRefreshDropdown = React.createClass({
  autobind: false,

  propTypes: {
    selected: number.isRequired,
    onChoose: func.isRequired,
  },

  getInitialState() {
    return {
      isOpen: false,
    }
  },

  findAutoRefreshItem(milliseconds) {
    return autoRefreshItems.find(values => values.milliseconds === milliseconds)
  },

  handleClickOutside() {
    this.setState({isOpen: false})
  },

  handleSelection(milliseconds) {
    this.props.onChoose(milliseconds)
    this.setState({isOpen: false})
  },

  toggleMenu() {
    this.setState({isOpen: !this.state.isOpen})
  },

  render() {
    const self = this
    const {selected} = self.props
    const {isOpen} = self.state
    const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)

    return (
      <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
        <div
          className="btn btn-sm btn-default dropdown-toggle"
          onClick={() => self.toggleMenu()}
        >
          <span
            className={classnames(
              'icon',
              +milliseconds > 0 ? 'refresh' : 'pause'
            )}
          />
          <span className="dropdown-selected">
            {inputValue}
          </span>
          <span className="caret" />
        </div>
        <ul className="dropdown-menu">
          <li className="dropdown-header">AutoRefresh Interval</li>
          {autoRefreshItems.map(item => {
            return (
              <li className="dropdown-item" key={item.menuOption}>
                <a
                  href="#"
                  onClick={() => self.handleSelection(item.milliseconds)}
                >
                  {item.menuOption}
                </a>
              </li>
            )
          })}
        </ul>
      </div>
    )
  },
})

export default OnClickOutside(AutoRefreshDropdown)

@@ -17,16 +17,27 @@
 ropTypes
+, Component
 %7D from '
@@ -215,226 +215,109 @@
 '%0A%0Ac
-onst %7Bnumber, func%7D = PropTypes%0A%0Aconst AutoRefreshDropdown = React.createClass(%7B%0A  autobind: false,%0A%0A  propTypes: %7B%0A    selected: number.isRequired,%0A    onChoose: func.isRequired,%0A  %7D,%0A%0A  getInitialState() %7B%0A    return
+lass AutoRefreshDropdown extends Component %7B%0A  constructor(props) %7B%0A    super(props)%0A    this.state =
  %7B%0A 
@@ -341,25 +341,24 @@
 e,%0A    %7D%0A  %7D
-,
 %0A%0A  findAuto
@@ -465,25 +465,24 @@
 seconds)%0A  %7D
-,
 %0A%0A  handleCl
@@ -530,25 +530,24 @@
  false%7D)%0A  %7D
-,
 %0A%0A  handleSe
@@ -553,17 +553,19 @@
 election
-(
+ = 
 millisec
@@ -564,25 +564,33 @@
 milliseconds
-)
+ =%3E () =%3E
  %7B%0A    this.
@@ -652,25 +652,24 @@
  false%7D)%0A  %7D
-,
 %0A%0A  toggleMe
@@ -670,24 +670,24 @@
 ggleMenu
-() %7B%0A   
+ = () =%3E
  this.se
@@ -722,21 +722,16 @@
 isOpen%7D)
-%0A  %7D,
 %0A%0A  rend
@@ -741,30 +741,8 @@
 ) %7B%0A
-    const self = this%0A
     
@@ -760,20 +760,20 @@
 cted%7D = 
-self
+this
 .props%0A 
@@ -792,20 +792,20 @@
 Open%7D = 
-self
+this
 .state%0A 
@@ -1060,26 +1060,20 @@
 nClick=%7B
-() =%3E self
+this
 .toggleM
@@ -1075,18 +1075,16 @@
 ggleMenu
-()
 %7D%0A      
@@ -1534,34 +1534,9 @@
 m =%3E
- %7B%0A            return (%0A  
+%0A
     
@@ -1614,77 +1614,33 @@
     
-  %3Ca%0A                  href=%22#%22%0A                  onClick=%7B() =%3E self
+%3Ca href=%22#%22 onClick=%7Bthis
 .han
@@ -1671,33 +1671,16 @@
 econds)%7D
-%0A                
 %3E%0A      
@@ -1689,18 +1689,16 @@
         
-  
 %7Bitem.me
@@ -1725,17 +1725,13 @@
     
-  
 %3C/a%3E%0A
-  
     
@@ -1740,26 +1740,24 @@
       %3C/li%3E%0A
-  
           )%0A
@@ -1759,21 +1759,8 @@
    )
-%0A          %7D)
 %7D%0A  
@@ -1797,12 +1797,141 @@
 %0A  %7D
+%0A%7D%0A%0Aconst %7Bnumber, func%7D = PropTypes%0A%0AAutoRefreshDropdown.propTypes = %7B%0A  selected: number.isRequired,%0A  onChoose: func.isRequired
 ,%0A%7D
-)
 %0A%0Aex

Update AutoRefresh component