import React, {Component, PropTypes} from 'react'
import {Link} from 'react-router'
import classnames from 'classnames'

import OnClickOutside from 'shared/components/OnClickOutside'

class Dropdown extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOpen: false,
    }

    this.handleClickOutside = ::this.handleClickOutside
    this.handleSelection = ::this.handleSelection
    this.toggleMenu = ::this.toggleMenu
    this.handleAction = ::this.handleAction
  }

  static defaultProps = {
    actions: [],
  }

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

  handleSelection(item) {
    this.toggleMenu()
    this.props.onChoose(item)
  }

  toggleMenu(e) {
    if (e) {
      e.stopPropagation()
    }
    this.setState({isOpen: !this.state.isOpen})
  }

  handleAction(e, action, item) {
    e.stopPropagation()
    action.handler(item)
  }

  render() {
    const {items, selected, className, iconName, actions, addNew} = this.props
    const {isOpen} = this.state

    return (
      <div onClick={this.toggleMenu} className={`dropdown ${className}`}>
        <div className="btn btn-sm btn-info dropdown-toggle">
          {iconName ? <span className={classnames("icon", {[iconName]: true})}></span> : null}
          <span className="dropdown-selected">{selected}</span>
          <span className="caret" />
        </div>
        {isOpen ?
          <ul className="dropdown-menu show">
            {items.map((item, i) => {
              return (
                <li className="dropdown-item" key={i}>
                  <a href="#" onClick={() => this.handleSelection(item)}>
                    {item.text}
                  </a>
                  <div className="dropdown-item__actions">
                    {actions.map((action) => {
                      return (
                        <button key={action.text} className="dropdown-item__action" onClick={(e) => this.handleAction(e, action, item)}>
                          <span title={action.text} className={`icon ${action.icon}`}></span>
                        </button>
                      )
                    })}
                  </div>
                </li>
              )
            })}
            {
              addNew ?
                <li>
                  <Link to={addNew.url}>
                    {addNew.text}
                  </Link>
                </li> :
                null
            }
          </ul>
          : null}
      </div>
    )
  }
}

const {
  arrayOf,
  shape,
  string,
  func,
} = PropTypes

Dropdown.propTypes = {
  actions: arrayOf(shape({
    icon: string.isRequired,
    text: string.isRequired,
    handler: func.isRequired,
  })),
  items: arrayOf(shape({
    text: string.isRequired,
  })).isRequired,
  onChoose: func.isRequired,
  addNew: shape({
    url: string.isRequired,
    text: string.isRequired,
  }),
  selected: string.isRequired,
  iconName: string,
  className: string,
}

export default OnClickOutside(Dropdown)

@@ -537,16 +537,94 @@
 ns: %5B%5D,%0A
+    buttonSize: 'btn-sm',%0A    buttonColor: 'btn-info',%0A    menuWidth: '100%25',%0A
   %7D%0A%0A  h
@@ -1049,16 +1049,52 @@
 , addNew
+, buttonSize, buttonColor, menuWidth
 %7D = this
@@ -1194,16 +1194,27 @@
 ssName=%7B
+classnames(
 %60dropdow
@@ -1228,16 +1228,33 @@
 ssName%7D%60
+, %7Bopen: isOpen%7D)
 %7D%3E%0A     
@@ -1275,45 +1275,60 @@
 ame=
-%22btn btn-sm btn-info dropdown-toggle%22
+%7B%60btn dropdown-toggle $%7BbuttonSize%7D $%7BbuttonColor%7D%60%7D
 %3E%0A  
@@ -1379,14 +1379,14 @@
 mes(
-%22
+'
 icon
-%22
+'
 , %7B%5B
@@ -1596,14 +1596,36 @@
 menu
+%22
  s
-how%22
+tyle=%7B%7Bwidth: menuWidth%7D%7D
 %3E%0A  
@@ -1867,16 +1867,58 @@
    %3C/a%3E%0A
+                  %7Bactions.length %3E 0 ?%0A  
         
@@ -1980,32 +1980,34 @@
                 
+  
 %7Bactions.map((ac
@@ -2031,32 +2031,34 @@
                 
+  
 return (%0A       
@@ -2042,32 +2042,34 @@
        return (%0A
+  
                 
@@ -2211,24 +2211,26 @@
             
+  
 %3Cspan title=
@@ -2309,16 +2309,18 @@
         
+  
 %3C/button
@@ -2335,34 +2335,38 @@
                 
+ 
+ 
 )%0A
+  
                 
@@ -2383,39 +2383,67 @@
                 
+  
 %3C/div%3E%0A
+                  : null%7D%0A
                 
@@ -3218,16 +3218,82 @@
 string,%0A
+  buttonSize: string,%0A  buttonColor: string,%0A  menuWidth: string,%0A
 %7D%0A%0Aexpor

Make dropdown easier to customize