import React from 'react'
import MenuList from '../MenuList'
import theme from './theme.css'
import PropTypes from 'prop-types'

class BaseMenuList extends React.Component {
  render () {
    let menuBar = {...this.props}
    let menuListElement = []
    let items = []
    menuBar.menus.forEach((m, i) => {
      let menuProps = {...m.props}
      if (m.type === 'divider') {
        if (items.length > 0) {
          menuListElement.push(
            <MenuList
              key={i - 1}
              {...menuBar}
              menus={items} />
          )
          items = []
        }
        menuListElement.push(
          <div key={i} {...menuProps} className={theme.divider} />
        )
      } else if (['subheader', 'nestedMenu', 'menu'].indexOf(m.type) >= 0) {
        items.push(m)
      }
    })
    if (items.length > 0) {
      menuListElement.push(
        <MenuList
          key={menuBar.menus.length}
          {...menuBar}
          menus={items} />
      )
      items = []
    }
    return (
      <div>
        {menuListElement}
      </div>
    )
  }
}

BaseMenuList.propTypes = {
  menus: PropTypes.array,
  enableTypography: PropTypes.bool
}

export default BaseMenuList