import React from 'react'
import cx from 'classnames'
import { isEmpty } from 'lodash'
import { VelocityTransitionGroup } from 'velocity-react'
import { position } from '../util/scrolling'
const { array, bool, func, object, string } = React.PropTypes

export default class Dropdown extends React.Component {
  constructor (props) {
    super(props)
    this.state = {neverOpened: true}
  }

  static propTypes = {
    children: array,
    className: string,
    alignRight: bool,
    toggleChildren: object.isRequired,
    onFirstOpen: func,
    backdrop: bool,
    triangle: bool
  }

  static contextTypes = {
    isMobile: bool
  }

  toggle = event => {
    const { active } = this.state
    this.setState({active: !active})
    if (!active && this.state.neverOpened) {
      this.setState({neverOpened: false})
      if (this.props.onFirstOpen) this.props.onFirstOpen()
    }
    if (event) {
      event.stopPropagation()
      event.preventDefault()
    }
  }

  hide = event => {
    if (this.state.active) this.setState({active: false})
    return true
  }

  componentDidMount () {
    window.addEventListener('click', this.hide)
  }

  componentWillUnmount () {
    window.removeEventListener('click', this.hide)
  }

  render () {
    const {
      toggleChildren, className, children, alignRight, backdrop, triangle
    } = this.props
    const { isMobile } = this.context
    const active = this.state.active && !isEmpty(children)
    return <div className={cx('dropdown', className, {active})} ref='parent'>
      <a className='dropdown-toggle' onClick={this.toggle}>
        {toggleChildren}
      </a>
      <ul className={cx('dropdown-menu', {'dropdown-menu-right': alignRight})}
        style={mobileMenuStyle(isMobile && active, this.refs.parent)}
        onClick={() => this.toggle()}>
        {triangle && <li className='triangle'
          style={{left: findTriangleLeftPos(isMobile, this.refs.parent)}}/>}
        {children}
      </ul>
      <VelocityTransitionGroup
        enter={{animation: 'fadeIn', duration: 100}}
        leave={{animation: 'fadeOut', duration: 100}}>
        {(backdrop || isMobile) && active && <a className='backdrop'/>}
      </VelocityTransitionGroup>
    </div>
  }
}

const margin = 10

const mobileMenuStyle = (shouldUse, parent) => {
  if (!shouldUse) return {}
  return {
    left: findLeftPos(parent) + margin,
    width: document.documentElement.clientWidth - margin * 2
  }
}

const findLeftPos = parent => parent ? -position(parent).x : null

const findTriangleLeftPos = (isMobile, parent) => {
  if (!isMobile || !parent) return
  return position(parent).x + parent.offsetWidth / 2 - margin - 1
}

@@ -568,16 +568,39 @@
 riangle:
+ bool,%0A    openOnHover:
  bool%0A  
@@ -659,29 +659,40 @@
 %0A  toggle = 
+(
 event
+, context)
  =%3E %7B%0A    co
@@ -768,19 +768,167 @@
 if (
-!
 active
- && 
+) %7B%0A      this.setState(%7BhoverOpened: false%7D)%0A    %7D else %7B%0A      if (context === 'hover') %7B%0A        this.setState(%7BhoverOpened: true%7D)%0A      %7D%0A      if (
 this
@@ -945,24 +945,26 @@
 erOpened) %7B%0A
+  
       this.s
@@ -995,24 +995,26 @@
 lse%7D)%0A      
+  
 if (this.pro
@@ -1050,24 +1050,32 @@
 FirstOpen()%0A
+      %7D%0A
     %7D%0A    if
@@ -1463,27 +1463,16 @@
 hildren,
- className,
  childre
@@ -1504,16 +1504,29 @@
 triangle
+, openOnHover
 %0A    %7D =
@@ -1537,16 +1537,55 @@
 s.props%0A
+    const %7B hoverOpened %7D = this.state%0A
     cons
@@ -1681,19 +1681,13 @@
     
-return %3Cdiv
+const
  cla
@@ -1684,34 +1684,35 @@
  const className
-=%7B
+ = 
 cx('dropdown', c
@@ -1710,16 +1710,27 @@
 pdown', 
+this.props.
 classNam
@@ -1735,16 +1735,22 @@
 ame,
+%0A     
  %7Bactive
 %7D)%7D 
@@ -1745,18 +1745,82 @@
  %7Bactive
-%7D)
+, 'has-triangle': triangle%7D)%0A%0A    return %3Cdiv className=%7BclassName
 %7D ref='p
@@ -1885,16 +1885,85 @@
 .toggle%7D
+%0A        onMouseEnter=%7Bev =%3E openOnHover && this.toggle(ev, 'hover')%7D
 %3E%0A      
@@ -2163,16 +2163,74 @@
 k=%7B() =%3E
+ this.toggle()%7D%0A        onMouseLeave=%7B() =%3E hoverOpened &&
  this.to

add dropdown option to open on hover