import React from 'react';

import styles from './index.less';

const Menu = props => {
  const renderTitle = title => {
    return <h4 className={styles.title}>{title}</h4>;
  };
  const renderMenuItem = data => {
    let menuItem = [];
    if (!data) {
      return;
    }
    if (!data.hasOwnProperty('routes')) {
      menuItem = (
        <div
          className={styles['main-menus-recentAll-menu-group-items-menu-item']}
          onClick={event => props.handleClick(event, data)}
        >
          <img src={`https://panda-water.cn/web4/${data.extData.icon}`} />
          <a
            className={`${
              styles['main-menus-recentAll-menu-group-items-menu-item-name']
            } ${styles.pad}`}
          >
            {data.name}
          </a>
        </div>
      );
    } else {
      data.routes.forEach((item, index) => {
        let render = (
          <div
            className={
              styles['main-menus-recentAll-menu-group-items-menu-item']
            }
            key={item.name}
            onClick={event => props.handleClick(event, item)}
          >
            <img src={`https://panda-water.cn/web4/${item.extData.icon.replace(/\s*/g, '')}`} />
            <a
              className={`${
                styles['main-menus-recentAll-menu-group-items-menu-item-name']
              } ${styles.pad}`}
            >
              {item.name}
            </a>
          </div>
        );
        menuItem.push(render);
      });
    }

    return menuItem;
  };
  return (
    <div className={styles['main-menus']}>
      <div className={styles['main-menus-recentAll']}>
        <div className={styles['main-menus-recentAll-menu-group']}>
          {(props.data.routes || []).map((item, index) => {
            return (
              <div
                className={styles['main-menus-recentAll-menu-group-items']}
                key={item.name}
              >
                {renderTitle(item.name)}
                {renderMenuItem(item)}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Menu;
