/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import Button from '@atlaskit/button/new';
import { WidthObserver } from '@atlaskit/width-detector';
import useInvokeClientAction from '../../../../state/hooks/use-invoke-client-action';
import useRovoChat from '../../../../state/hooks/use-rovo-chat';
import { getPromptAction } from '../../../common/rovo-chat-utils';
import AIEditIcon from '../../../FlexibleCard/assets/ai-edit-icon';
const HIDE_SECONDARY_ACTIONS_WIDTH = 320;
const PRIMARY_ACTION_ICON_ONLY_WIDTH = 220;
const styles = {
  actionGroup: "_zulp1b66 _1e0c1txw _2lx2vrvc"
};
const RovoPromptButton = ({
  hideContent = false,
  icon,
  onClick,
  promptAction,
  promptKey,
  testId
}) => {
  const iconBefore = useCallback(() => /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, icon), [icon]);
  const label = promptAction.data.name;
  const handleClick = useCallback(event => onClick(event, promptAction.data, promptKey), [onClick, promptAction.data, promptKey]);
  return /*#__PURE__*/React.createElement(Button, {
    appearance: "subtle",
    "aria-label": hideContent ? label : undefined,
    iconBefore: iconBefore,
    onClick: handleClick,
    spacing: "compact",
    testId: `${testId}-${promptKey}`
  }, hideContent ? null : label);
};
const EmbedRovoActionsFooter = ({
  actionData,
  prompts,
  testId = 'embed-rovo-actions-footer'
}) => {
  const intl = useIntl();
  const invoke = useInvokeClientAction({});
  const {
    isRovoChatEnabled,
    sendPromptMessage
  } = useRovoChat();
  const [containerWidth, setContainerWidth] = useState(undefined);
  const shouldHideSecondaryActions = containerWidth !== undefined && containerWidth < HIDE_SECONDARY_ACTIONS_WIDTH;
  const shouldHidePrimaryActionContent = containerWidth !== undefined && containerWidth < PRIMARY_ACTION_ICON_ONLY_WIDTH;
  const onClick = useCallback((event, promptData, promptKey) => {
    event.preventDefault();
    event.stopPropagation();
    invoke({
      ...actionData.invokeAction,
      actionFn: async () => sendPromptMessage(promptData),
      prompt: promptKey
    });
  }, [actionData.invokeAction, invoke, sendPromptMessage]);
  const promptActions = useMemo(() => prompts.reduce((actions, promptKey) => {
    if (shouldHideSecondaryActions && actions.length > 0) {
      return actions;
    }
    const promptAction = getPromptAction({
      promptKey,
      intl,
      url: actionData.url,
      product: actionData.product,
      iconSize: 'small'
    });
    if (!promptAction) {
      return actions;
    }
    const isPrimaryAction = actions.length === 0;
    actions.push( /*#__PURE__*/React.createElement(RovoPromptButton, {
      hideContent: isPrimaryAction && shouldHidePrimaryActionContent,
      icon: isPrimaryAction ? /*#__PURE__*/React.createElement(AIEditIcon, null) : promptAction.icon,
      key: promptKey,
      onClick: onClick,
      promptAction: promptAction,
      promptKey: promptKey,
      testId: testId
    }));
    return actions;
  }, []), [actionData.product, actionData.url, intl, onClick, prompts, shouldHidePrimaryActionContent, shouldHideSecondaryActions, testId]);
  if (!isRovoChatEnabled || promptActions.length === 0) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId
  }, /*#__PURE__*/React.createElement(WidthObserver, {
    setWidth: setContainerWidth,
    offscreen: true
  }), /*#__PURE__*/React.createElement("div", {
    className: ax([styles.actionGroup])
  }, promptActions));
};
export default EmbedRovoActionsFooter;