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

import Label from './Label'

const NavOptions = ({ collapsed, open, label, children, setRef }) => {
  const classes = classnames('nav-items', {
    block: open,
    hidden: !open
  })

  return (
    <ul className={classes} aria-label="sub-nav-list" ref={setRef}>
      {collapsed && <Label tooltip={!children}>{label}</Label>}
      {children}
    </ul>
  )
}

NavOptions.propTypes = {
  /** List of items for Sub Nav */
  children: PropTypes.node,
  /** Indicate wether the menu is collapsed */
  collapsed: PropTypes.bool,
  /** Label for floating sub nav menu */
  label: PropTypes.string,
  /** Indicate wether the subnav is open */
  open: PropTypes.bool,
  /** Function to set ref on menu */
  setRef: PropTypes.func
}

NavOptions.defaultProps = {
  open: false,
  collapsed: false,
  label: ''
}

NavOptions.displayName = 'NavOptions'

export default NavOptions