import React from 'react';
import PropTypes from 'prop-types';

import SubmenuHead from '../SubmenuHead';
import MenuItem, { menuItemPropTypes } from '../MenuItem';

const Submenu = ({ head, items, open, toggleSubmenu }) => (
  <React.Fragment>
    <SubmenuHead item={head} open={open} key={head.label} toggleSubmenu={toggleSubmenu} />
    {open && items.map(submenuItem => <MenuItem indented item={submenuItem} key={submenuItem.label} />)}
  </React.Fragment>
);

export const submenuPropTypes = {
  head: PropTypes.shape(menuItemPropTypes).isRequired,
  items: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
  open: PropTypes.bool.isRequired,
  toggleSubmenu: PropTypes.func.isRequired,
};

Submenu.propTypes = submenuPropTypes;

Submenu.defaultProps = {
  items: [],
};

export default Submenu;