import React from 'react';
import styles from './DropdownMenu.scss';

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

MenuItem.propTypes = {
  onClick: React.PropTypes.func,
  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,
}