/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./expandable-menu-item-trigger.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, useCallback, useId, useRef } from 'react';
import { IconButton } from '@atlaskit/button/new';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
// Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
const chevronDisplayCssVar = '--expandable-chevron-display';
const providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
const wrapperStyles = {
  root: "_1mmi1txw _165nglyw",
  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
};
const iconStyles = {
  chevron: "_1e0ciw0t _1tz3r0mg",
  providedElemBefore: "_1e0c1xb2",
  providedElemBeforeSelected: "_syaz1qo3"
};
const ExpandableMenuItemIcon = ({
  iconProps,
  isExpanded,
  isSelected,
  providedElemBefore
}) => {
  const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
  const chevronElem = /*#__PURE__*/React.createElement(ChevronIcon, _extends({}, iconProps, {
    label: "",
    color: isSelected ? "var(--ds-icon-selected, #0C66E4)" : undefined,
    size: "small"
  }));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: ax([iconStyles.chevron])
  }, chevronElem), providedElemBefore && /*#__PURE__*/React.createElement("div", {
    className: ax([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
  }, providedElemBefore));
};
/**
 * __ExpandableMenuItemTrigger__
 *
 * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
 */
export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
  actions,
  isSelected,
  href,
  elemBefore: providedElemBefore,
  elemAfter,
  actionsOnHover,
  onClick,
  children,
  testId,
  interactionName,
  isContentTooltipDisabled,
  visualContentRef,
  isDragging,
  hasDragIndicator,
  dropIndicator
}, forwardedRef) => {
  const id = useId();
  const onExpansionToggle = useOnExpansionToggle();
  const isExpanded = useIsExpanded();
  const setIsExpanded = useSetIsExpanded();
  const itemRef = useRef(null);
  const handleIconClick = useCallback(() => {
    onExpansionToggle === null || onExpansionToggle === void 0 ? void 0 : onExpansionToggle(!isExpanded);
    setIsExpanded(!isExpanded);
  }, [isExpanded, onExpansionToggle, setIsExpanded]);
  const handleMenuContentClick = useCallback((event, analyticsEvent) => {
    const newValue = !isExpanded;
    onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
      isExpanded: newValue
    });
    onExpansionToggle === null || onExpansionToggle === void 0 ? void 0 : onExpansionToggle(newValue);
    setIsExpanded(newValue);
  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
  const isSelectable = typeof href !== 'undefined';
  useScrollMenuItemIntoView({
    elementRef: itemRef,
    isSelected: Boolean(isSelectable && isSelected)
  });

  // Wrapped in an IconButton if the expandable menu item trigger is selectable
  const elemBefore = isSelectable ? /*#__PURE__*/React.createElement(IconButton, {
    icon: iconProps => /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
      iconProps: iconProps,
      isExpanded: isExpanded,
      isSelected: isSelected,
      providedElemBefore: providedElemBefore
    }),
    "aria-expanded": isExpanded
    // We are labelling the icon button using the containing menu item's content, to provide context to
    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
    // `aria-expanded` attribute to indicate the expanded state of the menu item.
    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
    ,
    "aria-labelledby": id
    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
    // `aria-labelledby`, which will be used instead.
    ,
    label: "",
    appearance: "subtle",
    spacing: "compact",
    onClick: handleIconClick,
    interactionName: interactionName,
    testId: testId ? `${testId}--elem-before-button` : undefined
  }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
    isExpanded: isExpanded,
    isSelected: isSelected,
    providedElemBefore: providedElemBefore
  });

  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
  return /*#__PURE__*/React.createElement("div", {
    ref: itemRef,
    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
  }, /*#__PURE__*/React.createElement(MenuItemBase, {
    id: id,
    actions: actions,
    actionsOnHover: actionsOnHover,
    elemBefore: elemBefore,
    ariaExpanded: isExpanded,
    elemAfter: elemAfter,
    href: href,
    isSelected: isSelected,
    onClick: handleMenuContentClick,
    ref: forwardedRef,
    visualContentRef: visualContentRef,
    testId: testId,
    interactionName: interactionName,
    isContentTooltipDisabled: isContentTooltipDisabled,
    isDragging: isDragging,
    hasDragIndicator: hasDragIndicator,
    dropIndicator: dropIndicator
  }, children));
});