"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.VerticalNavItem = void 0;
var _compat = require("preact/compat");
var _VerticalNav = _interopRequireDefault(require("./VerticalNav"));
var _VerticalNavItemLabel = _interopRequireDefault(require("./VerticalNavItemLabel"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const VerticalNavItem = props => {
  const rootId = (0, _useId.default)('vertical-nav-item--', props.id);
  const subnavId = `${rootId}__subnav`;
  const [collapsed, setCollapsed] = (0, _compat.useState)(props.defaultCollapsed);

  /**
   * Note: This event handler will only get called when the VerticalNavItemLabel
   * is a link or plain text
   */
  const handleClick = evt => {
    if (props.onClick) {
      props.onClick(evt, rootId, props.url);
    }
  };
  const handleToggleClick = () => {
    setCollapsed(!collapsed);
    if (props.onSubnavToggle) {
      props.onSubnavToggle(rootId, collapsed);
    }
  };
  const hasSubnav = () => 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
   */
  const handleLabelClick = evt => {
    if (hasSubnav()) {
      return handleToggleClick();
    }
    return handleClick(evt);
  };

  /**
   * Checks if a descendant is selected
   * @param {Array} children - The nested items
   * @return {Boolean}
   */
  const childIsSelected = children => {
    if (children && children.length) {
      return children.some(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}
   */
  const isSelected = () => {
    if (props.selected) return props.selected;
    if (props._selectedId && hasSubnav()) {
      return childIsSelected(props.items);
    }
    return false;
  };
  const 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
      const item = Object.assign({}, props);
      delete item.items;
      return [item].concat(props.items);
    }
    return props.items;
  };
  const classes = (0, _classnames.default)('ds-c-vertical-nav__item', props.className);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
    className: classes,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalNavItemLabel.default, {
      collapsed: collapsed,
      component: props.component,
      label: props.label,
      hasSubnav: hasSubnav(),
      onClick: handleLabelClick,
      selected: isSelected(),
      subnavId: subnavId,
      url: props.url
    }), hasSubnav() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalNav.default, {
      selectedId: props._selectedId,
      collapsed: collapsed,
      id: subnavId,
      items: subnavItems(),
      component: props.component,
      nested: true
    })]
  });
};
exports.VerticalNavItem = VerticalNavItem;
VerticalNavItem.defaultProps = {
  defaultCollapsed: false
};
var _default = exports.default = VerticalNavItem;