import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import VerticalNavItem from './VerticalNavItem';
import classNames from 'classnames';
export var VerticalNav = function VerticalNav(props) {
  var classes = classNames({
    'ds-c-vertical-nav': !props.nested,
    'ds-c-vertical-nav__subnav': props.nested,
    'ds-c-vertical-nav--collapsed': props.collapsed
  }, props.className);
  var navProps = props.ariaNavLabel ? {
    'aria-label': props.ariaNavLabel
  } : {};
  return /*#__PURE__*/React.createElement("nav", navProps, /*#__PURE__*/React.createElement("ul", {
    className: classes,
    id: props.id
  }, props.items.map(function (item) {
    var onClick = item.onClick || props.onLinkClick;

    if (!onClick) {
      onClick = undefined;
    }

    var selected = item.selected || props.selectedId && props.selectedId === item.id;
    return /*#__PURE__*/React.createElement(VerticalNavItem, _extends({}, item, {
      component: props.component || item.component,
      _selectedId: props.selectedId,
      key: item.id + item.url + item.label,
      onClick: onClick,
      selected: selected
    }));
  })));
};
VerticalNav.propTypes = {
  /**
     * An optional arial label for the `<nav>` element in this component.
     * This prop is necessary when there is more than one nav element on a page.
     */
  ariaNavLabel: _pt.string,

  /**
     * Additional classes to be added to the root element
     */
  className: _pt.string,

  /**
     * Whether or not the menu is in a collapsed state
     */
  collapsed: _pt.bool,

  /**
     * When provided, this will render the passed in component for all `VerticalNavItem`s. This is useful when
     * integrating with React Router's `<Link>` or using your own custom component.
     * If more specific control is needed, each `VerticalNavItem` object also accepts a `component` prop.
     */
  component: _pt.any,

  /**
     * The `id` of the selected `VerticalNavItem`. This will also set the
     * `selected` prop on the item's parents.
     */
  selectedId: _pt.string,
  id: _pt.string,

  /**
     * An array of [`VerticalNavItem`]({{root}}/components/vertical-nav/#components.vertical-nav.VerticalNavItem) data objects
     */
  items: _pt.array.isRequired,

  /**
     * Indicates this list is nested within another nav item.
     */
  nested: _pt.bool,

  /**
     * Called when one of the nav links is clicked, with the following arguments:
     * [`SyntheticEvent`](https://facebook.github.io/react/docs/events.html),
     * `id`, `url`
     */
  onLinkClick: _pt.func
};
VerticalNav.defaultProps = {
  collapsed: false
};
export default VerticalNav;