/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */

import { useCallback, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { di } from 'react-magnetic-di';
import ButtonGroup from '@atlaskit/button/button-group';
import { IconButton } from '@atlaskit/button/new';
import Button from '@atlaskit/button/standard-button';
import DropdownMenu from '@atlaskit/dropdown-menu';
import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
import { fg } from '@atlaskit/platform-feature-flags';
import Tooltip from '@atlaskit/tooltip';
import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
import { messages } from '../../../../../messages';
import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
import useRovoConfig from '../../../../../state/hooks/use-rovo-config';
import { RovoChatPromptKey } from '../../../../common/rovo-chat-utils';
import { sizeToButtonSpacing } from '../../utils';
import { filterActionItems } from '../utils';
import ActionGroupItem from './action-group-item';
const styles = null;
const FULL_ACTIONS_SIZE = 450;
const REDUCED_ACTIONS_SIZE = 360;
const ICON_ONLY_ACTIONS_SIZE = 200;
const OVERFLOW_ONLY_ACTIONS_SIZE = 100;
const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => /*#__PURE__*/React.createElement(ActionGroupItem, {
  item: item,
  key: idx,
  size: size,
  appearance: appearance,
  asDropDownItems: asDropDownItems,
  onActionItemClick: onActionItemClick
}));

/**
 * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
 * preferences.
 * @internal
 * @param {ActionGroupProps} ActionGroupProps
 * @see Action
 */
const ActionGroup = ({
  items = [],
  size = SmartLinkSize.Medium,
  appearance,
  visibleButtonsNum = 2,
  onDropdownOpenChange,
  containerWidth = Infinity
}) => {
  var _context$actions;
  const context = useFlexibleUiContext();
  const ui = useFlexibleUiOptionContext();
  const {
    product
  } = useRovoConfig();
  const [isOpen, setIsOpen] = useState(false);
  const renderableActionItems = useMemo(() => filterActionItems(items, context, product), [context, items, product]);
  const isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
  const rovoChatAction = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.RovoChatAction];
  const isRovoActionsEnabled = useMemo(() => {
    return !!rovoChatAction && rovoChatAction.product === 'CONFLUENCE' && items.some(action => action.name === 'RovoChatAction');
  }, [rovoChatAction, items]);
  const onOpenChange = useCallback(attrs => {
    setIsOpen(attrs.isOpen);
    if (onDropdownOpenChange) {
      onDropdownOpenChange(attrs.isOpen);
    }
  }, [onDropdownOpenChange]);
  const onActionItemClick = useCallback(() => {
    if (isOpen) {
      onOpenChange({
        isOpen: false
      });
    }
  }, [isOpen, onOpenChange]);
  const actionButtons = useMemo(() => {
    if (isRovoActionsEnabled) {
      const rovoActions = [...(containerWidth >= REDUCED_ACTIONS_SIZE ? renderableActionItems.slice(0, visibleButtonsNum - 1) : []), ...(containerWidth >= OVERFLOW_ONLY_ACTIONS_SIZE ? [{
        name: ActionName.RovoChatAction,
        prompts: [RovoChatPromptKey.ASK_ROVO_ANYTHING],
        iconSize: 'small',
        cardAppearance: CardDisplay.Block,
        hideContent: containerWidth < FULL_ACTIONS_SIZE && containerWidth >= REDUCED_ACTIONS_SIZE || containerWidth < ICON_ONLY_ACTIONS_SIZE && containerWidth >= OVERFLOW_ONLY_ACTIONS_SIZE
      }, {
        name: ActionName.CopyLinkAction,
        hideContent: true,
        iconSize: 'small'
      }, {
        name: ActionName.PreviewAction,
        hideContent: true,
        iconSize: 'small'
      }] : [])];
      return renderActionItems(rovoActions, size, appearance, false, onActionItemClick);
    }
    const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(0, visibleButtonsNum - 1) : renderableActionItems;
    return renderActionItems(actionItems, size, appearance, false, onActionItemClick);
  }, [appearance, isMoreThenTwoItems, onActionItemClick, renderableActionItems, size, visibleButtonsNum, isRovoActionsEnabled, containerWidth]);
  const moreActionDropdown = useMemo(() => {
    let actionItems;
    if (isRovoActionsEnabled && containerWidth < OVERFLOW_ONLY_ACTIONS_SIZE) {
      actionItems = [...renderableActionItems, {
        name: ActionName.RovoChatAction,
        prompts: [RovoChatPromptKey.ASK_ROVO_ANYTHING],
        iconSize: 'small',
        cardAppearance: CardDisplay.Block
      }, {
        name: ActionName.CopyLinkAction,
        iconSize: 'small'
      }, {
        name: ActionName.PreviewAction,
        iconSize: 'small'
      }];
    } else if (isRovoActionsEnabled && containerWidth < REDUCED_ACTIONS_SIZE) {
      actionItems = renderableActionItems;
    } else {
      actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
    }
    if (actionItems.length > 0) {
      const spacing = sizeToButtonSpacing[size];
      const moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
        label: "more",
        color: "currentColor"
      });
      const formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
      const moreIconAppearance = appearance !== 'subtle' ? 'default' : appearance;
      return /*#__PURE__*/React.createElement(DropdownMenu, {
        isOpen: isOpen,
        onOpenChange: onOpenChange,
        trigger: ({
          triggerRef,
          ...props
        }) => /*#__PURE__*/React.createElement(Tooltip, {
          content: formatMessage,
          hideTooltipOnClick: true,
          testId: "action-group-more-button-tooltip",
          tag: "span"
        }, fg('navx-5343-sl-action-block-styling-fixes') ? /*#__PURE__*/React.createElement(IconButton, _extends({}, props, {
          spacing: size === SmartLinkSize.XLarge ? 'default' : 'compact',
          testId: "action-group-more-button",
          icon: MoreIcon,
          ref: triggerRef,
          label: "more",
          color: "currentColor"
        }, isRovoActionsEnabled ? {
          appearance: moreIconAppearance
        } : {})) : /*#__PURE__*/React.createElement(Button, _extends({}, props, {
          spacing: isRovoActionsEnabled ? size === SmartLinkSize.XLarge ? 'default' : 'compact' : spacing,
          testId: "action-group-more-button",
          iconBefore: moreIcon,
          ref: triggerRef
        }, isRovoActionsEnabled ? {
          appearance
        } : {}))),
        testId: "action-group-dropdown",
        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
      }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
    }
    return null;
  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum, isRovoActionsEnabled, containerWidth]);
  return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: ax(["_1e0c116y _dzc21h6o _1ilq1i6y", "actions-button-group"]),
    "data-action-open": isOpen
  }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
};
export default ActionGroup;