import { useState } from 'react';
import VerticalNav from './VerticalNav';
import VerticalNavItemLabel from './VerticalNavItemLabel';
import classNames from 'classnames';
import useId from '../utilities/useId';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const VerticalNavItem = props => {
  const rootId = useId('vertical-nav-item--', props.id);
  const subnavId = `${rootId}__subnav`;
  const [collapsed, setCollapsed] = 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 = classNames('ds-c-vertical-nav__item', props.className);
  return /*#__PURE__*/_jsxs("li", {
    className: classes,
    children: [/*#__PURE__*/_jsx(VerticalNavItemLabel, {
      collapsed: collapsed,
      component: props.component,
      label: props.label,
      hasSubnav: hasSubnav(),
      onClick: handleLabelClick,
      selected: isSelected(),
      subnavId: subnavId,
      url: props.url
    }), hasSubnav() && /*#__PURE__*/_jsx(VerticalNav, {
      selectedId: props._selectedId,
      collapsed: collapsed,
      id: subnavId,
      items: subnavItems(),
      component: props.component,
      nested: true
    })]
  });
};
VerticalNavItem.defaultProps = {
  defaultCollapsed: false
};
export default VerticalNavItem;