import React from 'react';
import classnames from 'classnames';
import reactMixin from 'react-mixin';
import OnClickOutside from 'react-onclickoutside';
import map from 'lodash/map';

export default class DropdownMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };

    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  buttonClick() {
    this.setState({active: !this.state.active});
  }

  itemClick(e, key) {
    this.props.onChange(key);
    this.setState({active: !this.state.active});
  }

  handleClickOutside(e) {
    if (this.state.active) {
      this.setState({active: false});
    }
  }

  render() {
    return (
      <div className={classnames('DropdownMenu', {'is-open': this.state.active})}>
        <div className="DropdownMenu-button" onClick={() => this.buttonClick()}>
          {((this.props.value !== null) ? this.props.items[this.props.value] : this.props.defaultText)  || 'Select...'}
        </div>
        <ul className="DropdownMenu-list">
          {map(this.props.items, (v, k) => <li key={k} onClick={(e) => this.itemClick(e, k)}>{v}</li>)}
        </ul>
      </div>
    );
  }
}

DropdownMenu.propTypes = {
  items: React.PropTypes.object,
  value: React.PropTypes.string,
  defaultText: React.PropTypes.string,
  onChange: React.PropTypes.func
};

reactMixin.onClass(DropdownMenu, OnClickOutside);
export default DropdownMenu;