/**
 * imui.Menu
 * @author moxhe(何璇)
 * @date 2018-05-29
 */
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { menuContext } from './context';
// @require '../style/index.scss'

class Menu extends React.PureComponent {
  static propTypes = {
    /**
     * 布局选项
     */
    mode: PropTypes.oneOf(['vertical', 'horizontal']),
    /**
     * 唯一标志
     */
    name: PropTypes.string,
    /**
     * 菜单标题
     */
    title: PropTypes.any,
    /**
     * 是否折叠
     */
    collapsed: PropTypes.bool,
    /**
     * 是否可交互
     */
    interactive: PropTypes.bool,
  };

  static defaultProps = {
    mode: 'vertical',
    collapsed: false,
    interactive: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      collapsed: !!props.collapsed,
    };
  }

  componentWillReceiveProps(nextProps) {
    const { collapsed } = nextProps;

    if (collapsed !== this.props.collapsed) {
      this.toggleCollapsed(collapsed);
    }
  }

  toggleCollapsed(v = !this.props.collapsed) {
    this.setState({ collapsed: v });
  }

  render() {
    const { Consumer } = menuContext;
    const { mode, name, title, interactive, className } = this.props;
    const { collapsed } = this.state;
    const cls = classnames('im-menu', {
      [className]: !!className,
    });
    const listCls = classnames('im-menu-list', {
      [`im-menu-list--${mode}`]: !!mode,
      [`im-menu-list--collapsed`]: collapsed,
    });

    return (
      <Consumer>
        {(({ interactType, onClickMenuTitle }) => {
          let menuProps = {};
          if (interactive && interactType === 'hover') {
            menuProps = {
              onMouseEnter: () => {
                this.toggleCollapsed(false);
              },
              onMouseLeave: () => {
                this.toggleCollapsed(true);
              },
            };
          }

          const ttProps = {
            onClick: (e) => {
              if (interactType === 'click') {
                this.toggleCollapsed();
              }
              onClickMenuTitle(e, name);
            }
          };

          return (
            <div className={cls} {...menuProps}>
              {title ? <div className="im-menu-tt" {...ttProps}>{title}</div> : null}
              <ul className={listCls}>{this.props.children}</ul>
            </div>
          );
        })}
      </Consumer>
    );
  }
}


export default Menu;