import React from 'react';
import { browserHistory } from 'react-router';

import styles from './DropdownMenu.scss';

class MenuItem extends React.Component {
  onClick = () => {
    if (this.props.to) {
      browserHistory.push(this.props.to);
    } else {
      this.props.onClick();
    }
  };

  render() {
    return (
      <div className={styles.menuItem} onClick={this.onClick}>
        {this.props.children}
      </div>
    );
  }
}

MenuItem.propTypes = {
  onClick: React.PropTypes.func,
  to: React.PropTypes.string,
  children: React.PropTypes.node.isRequired,
};

//

class DropdownMenu extends React.Component {
  static propTypes = {
    label: React.PropTypes.node.isRequired,
    children: React.PropTypes.node.isRequired,
  };

  state = {
    menuVisible: false,
  };

  onMouseEnter = () => {
    this.setState({ menuVisible: true });
  };

  onMouseLeave = () => {
    this.setState({ menuVisible: false });
  };

  onClick = () => {
    this.setState({ menuVisible: !this.state.menuVisible });
  };

  render() {
    return (
      <div
        className={styles.menuContainer}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
      >
        <div className={styles.label} onClick={this.onClick}>
          {this.props.label}
        </div>

        {this.state.menuVisible
          ? <div className={styles.menu}>
              {this.props.children}
            </div>
          : null}
      </div>
    );
  }
}

export default DropdownMenu;
export { MenuItem };