import React, { Component } from 'react';
import { Menu } from 'antd';
import './index.less';

class MenuLayout extends Component {
  onSelect(info, e) {
    if (this.props.onSelect) this.props.onSelect(info, e);
  }

  getItem(item) {
    const { isHidden } = this.props;
    if (item.hidden || (isHidden && isHidden(item))) return <Menu.Item className="hidden" />;
    if (item.children && item.children.length > 0) {
      return (
        <Menu.SubMenu {...item}>
          {item.children.map(subItem => {
            return this.getItem(subItem);
          })}
        </Menu.SubMenu>
      );
    }
    return <Menu.Item {...item}>{item.title}</Menu.Item>;
  }

  render() {
    const { itemList = [] } = this.props;
    return (
      <div className="menu-layout">
        {itemList.length > 0 && (
          <Menu {...this.props} onSelect={(info, e) => this.onSelect(info, e)}>
            {itemList.map(item => {
              return this.getItem(item);
            })}
          </Menu>
        )}
      </div>
    );
  }
}

export default MenuLayout;
