import React, {Component, PropTypes} from 'react'
import EventListener from 'react-event-listener'
import {colors} from '../../variables'

const defaultContainerStyle = {
  position: 'relative',
  display: 'inline-block'
}

const defaultChildrenStyle = {
  position: 'absolute',
  background: colors.white,
  border: '1px solid',
  borderColor: colors.pacificBlue,
  boxShadow: '0px 2px 7px rgba(0,0,0,.25)',
  minWidth: '100%',
  zIndex: 1000
}
const centerChildren = {left: '50%', transform: 'translate(-50%, 0)'}
const leftChildren = {left: 0}
const rightChildren = {right: 0}

const defaultTriggerStyle = {
  width: '100%'
}

const defaultBorderArrow = {
  bottom: '-6px',
  left: '50%',
  border: 'solid transparent',
  height: '0px',
  width: '0px',
  position: 'absolute',
  pointerEvents: 'none',
  borderBottomColor: colors.pacificBlue,
  borderWidth: '6px',
  marginLeft: '-6px',
  zIndex: 1001
}

const defaultBackgroundArrow = {
  bottom: '-6px',
  left: '50%',
  border: 'solid transparent',
  height: '0px',
  width: '0px',
  position: 'absolute',
  pointerEvents: 'none',
  borderBottomColor: colors.white,
  borderWidth: '5px',
  marginLeft: '-5px',
  zIndex: 1002
}

class Dropdown extends Component {
  state = {
    mouseIsOver: false,
    onMouseLeave: () => this.setState({mouseIsOver: false}),
    onMouseEnter: () => this.setState({mouseIsOver: true}),
    isOpen: false,
    openDropdown: (e) => {
      e.stopPropagation() // <-- stop the event from propagating to the window
      this.setState({isOpen: true})
    },
    closeDropdown: () => this.setState({isOpen: false})
  }
  render () {
    const {children, triggerNode, disabled, left, right, center, arrow, borderColor, backgroundColor} = this.props
    const {onMouseLeave, onMouseEnter, mouseIsOver, openDropdown, isOpen} = this.state

    const computedTriggerStyle = Object.assign({},
      defaultTriggerStyle,
      {cursor: disabled ? 'not-allowed' : 'pointer'}
    )

    const computedChildrenStyle = Object.assign({},
      defaultChildrenStyle,
      borderColor ? {borderColor} : {},
      backgroundColor ? {backgroundColor} : {},
      arrow ? {marginTop: '5px'} : {},
      left ? leftChildren : {},
      right ? rightChildren : {},
      center ? centerChildren : {}
    )

    const computedBackgroundArrow = Object.assign({},
      defaultBackgroundArrow,
      backgroundColor ? {borderBottomColor: backgroundColor} : {},
    )

    const computedBorderArrow = Object.assign({},
      defaultBorderArrow,
      borderColor ? {borderBottomColor: borderColor} : {},
    )

    const ArrowThing = (
      <div>
        <div style={computedBorderArrow}></div>
        <div style={computedBackgroundArrow}></div>
      </div>
    )

    const toggleFunc = isOpen ? () => false : openDropdown
    const computedToggleFunc = disabled ? () => false : toggleFunc
    return (
      <div
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        style={defaultContainerStyle}
      >
        {isOpen
          ? <EventListener target={window} onClick={this._onWindowClick} />
          : null
        }
        <div onClick={computedToggleFunc} style={computedTriggerStyle}>
          {triggerNode}
        </div>
        {arrow && isOpen ? ArrowThing : null}
        {isOpen
          ? <div style={computedChildrenStyle}>{children}</div>
          : null
        }
      </div>
    )
  }
  _onWindowClick = () => {
    const {closeOnClick} = this.props
    const {mouseIsOver, closeDropdown} = this.state
    if (!mouseIsOver || closeOnClick) { closeDropdown() }
  }
}

Dropdown.propTypes = {
  arrow: PropTypes.bool,
  backgroundColor: PropTypes.string,
  borderColor: PropTypes.string,
  center: PropTypes.bool,
  closeOnClick: PropTypes.bool,
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
  left: PropTypes.bool,
  right: PropTypes.bool,
  triggerNode: PropTypes.node.isRequired
}

export default Dropdown

@@ -1396,115 +1396,57 @@
     
-openDropdown: (e) =%3E %7B%0A      e.stopPropagation() // %3C-- stop the event from propagating to the window%0A     
+stillPropagating: false,%0A    openDropdown: (e) =%3E
  thi
@@ -1473,16 +1473,34 @@
 true
-%7D)%0A    %7D
+, stillPropagating: true%7D)
 ,%0A  
@@ -3464,26 +3464,208 @@
 down
-%7D = this.state%0A   
+, isOpen, stillPropagating%7D = this.state%0A    if (closeOnClick && stillPropagating) %7B%0A      this.setState(%7BstillPropagating: false%7D) // %3C-- bug fix for the synthetic event propagation... wow%0A    %7D else
  if 
@@ -3696,16 +3696,22 @@
 Click) %7B
+%0A     
  closeDr
@@ -3718,16 +3718,20 @@
 opdown()
+%0A   
  %7D%0A  %7D%0A%7D

Fix event propagation