function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React from "preact/compat";
import { useState } from "preact/compat";
import VerticalNav from "./VerticalNav";
import VerticalNavItemLabel from "./VerticalNavItemLabel";
import classNames from 'classnames';
import useId from "../utilities/useId";
export var VerticalNavItem = function VerticalNavItem(props) {
  var rootId = useId('vertical-nav-item--', props.id);
  var subnavId = "".concat(rootId, "__subnav");
  var _useState = useState(props.defaultCollapsed),
    _useState2 = _slicedToArray(_useState, 2),
    collapsed = _useState2[0],
    setCollapsed = _useState2[1];

  /**
   * Note: This event handler will only get called when the VerticalNavItemLabel
   * is a link or plain text
   */
  var handleClick = function handleClick(evt) {
    if (props.onClick) {
      props.onClick(evt, rootId, props.url);
    }
  };
  var handleToggleClick = function handleToggleClick() {
    setCollapsed(!collapsed);
    if (props.onSubnavToggle) {
      props.onSubnavToggle(rootId, collapsed);
    }
  };
  var hasSubnav = function hasSubnav() {
    return Boolean(props.items && props.items.length > 0);
  };

  /**
   * Called when VerticalNavItemLabel is clicked. Since the "label" could be
   * a link, subnav toggle button, or plain text, we use this method to
   * determine what action to take and which event to actually fire.
   * @param {Object} SyntheticEvent
   */
  var handleLabelClick = function handleLabelClick(evt) {
    if (hasSubnav()) {
      return handleToggleClick();
    }
    return handleClick(evt);
  };

  /**
   * Checks if a descendant is selected
   * @param {Array} children - The nested items
   * @return {Boolean}
   */
  var childIsSelected = function childIsSelected(children) {
    if (children && children.length) {
      return children.some(function (child) {
        return child.id === props._selectedId || childIsSelected(child.items);
      });
    }
    return false;
  };

  /**
   * Check if this item is selected or if it is a parent of a selected item
   * @return {Boolean}
   */
  var isSelected = function isSelected() {
    if (props.selected) return props.selected;
    if (props._selectedId && hasSubnav()) {
      return childIsSelected(props.items);
    }
    return false;
  };
  var subnavItems = function subnavItems() {
    if (props.url) {
      // Since the VerticalNavItemLabel will just toggle the subnav, we
      // add a link to the top of the subnav for this item. Otherwise there
      // wouldn't be a way to actually visit its URL
      var item = Object.assign({}, props);
      delete item.items;
      return [item].concat(props.items);
    }
    return props.items;
  };
  var classes = classNames('ds-c-vertical-nav__item', props.className);
  return /*#__PURE__*/React.createElement("li", {
    className: classes
  }, /*#__PURE__*/React.createElement(VerticalNavItemLabel, {
    ariaCollapsedStateButtonLabel: props.ariaCollapsedStateButtonLabel,
    ariaExpandedStateButtonLabel: props.ariaExpandedStateButtonLabel,
    collapsed: collapsed,
    component: props.component,
    label: props.label,
    hasSubnav: hasSubnav(),
    onClick: handleLabelClick,
    selected: isSelected(),
    subnavId: subnavId,
    url: props.url
  }), hasSubnav() && /*#__PURE__*/React.createElement(VerticalNav, {
    selectedId: props._selectedId,
    collapsed: collapsed,
    id: subnavId,
    items: subnavItems(),
    component: props.component,
    nested: true
  }));
};
VerticalNavItem.defaultProps = {
  // Unfortunately, we're defining these default ARIA props here and in
  // VerticalNavItemLabel. We define them here so they show in the docs.
  // TODO(sawyer): Update react-docgen so we don't have to do this
  ariaCollapsedStateButtonLabel: 'Expand sub-navigation',
  ariaExpandedStateButtonLabel: 'Collapse sub-navigation',
  defaultCollapsed: false
};
export default VerticalNavItem;