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 = {
  /** Menu item that has a submenu */
  head: PropTypes.shape(menuItemPropTypes).isRequired,

  /** An array of items in the submenu (expanded items e.g. Solutions >  Recruitment & Staffing) */
  items: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),

  /** A check for whether the submenu is open to render the submenu items */
  open: PropTypes.bool.isRequired,

  /** Function to toggle the submenu */
  toggleSubmenu: PropTypes.func.isRequired,
};

Submenu.propTypes = submenuPropTypes;

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

export default Submenu;