"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.VerticalNav = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _VerticalNavItem = _interopRequireDefault(require("./VerticalNavItem"));

var _classnames = _interopRequireDefault(require("classnames"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

var VerticalNav = function VerticalNav(props) {
  var classes = (0, _classnames.default)({
    '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.default.createElement("nav", navProps, /*#__PURE__*/_react.default.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.default.createElement(_VerticalNavItem.default, _extends({}, item, {
      component: props.component || item.component,
      _selectedId: props.selectedId,
      key: item.id + item.url + item.label,
      onClick: onClick,
      selected: selected
    }));
  })));
};

exports.VerticalNav = VerticalNav;
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: _propTypes.default.string,

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

  /**
     * Whether or not the menu is in a collapsed state
     */
  collapsed: _propTypes.default.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: _propTypes.default.any,

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

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

  /**
     * Indicates this list is nested within another nav item.
     */
  nested: _propTypes.default.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: _propTypes.default.func
};
VerticalNav.defaultProps = {
  collapsed: false
};
var _default = VerticalNav;
exports.default = _default;