import React, { memo, useCallback } from 'react';
import { DropdownMenu, DROPDOWN_MENU_PLACEMENT_TYPES } from '../dropdown-menu';
import { Avatar } from '../avatar';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { getOptionsTriggerIcon } from './renderers';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ChatMessageHeaderBase({
  timestamp,
  username,
  avatarUrl,
  options,
  itemKey,
  onSelect,
  optionsTriggerAriaLabel
}) {
  const isActionable = !!options?.length;
  const handleSelect = useCallback(({
    key
  }) => {
    onSelect?.({
      itemKey,
      optionKey: key
    });
  }, [onSelect, itemKey]);
  return /*#__PURE__*/_jsxs("div", {
    className: "chat-item-header",
    children: [/*#__PURE__*/_jsxs("div", {
      className: "chat-item-metadata",
      children: [/*#__PURE__*/_jsx(Avatar, {
        testId: "user-avatar",
        imageSrc: avatarUrl,
        callerName: username,
        isTooltipHidden: true
      }), /*#__PURE__*/_jsxs("span", {
        className: "chat-item-description",
        children: [/*#__PURE__*/_jsx(TruncateWithTooltip, {
          children: /*#__PURE__*/_jsx("span", {
            children: username
          })
        }), /*#__PURE__*/_jsx("span", {
          children: timestamp
        })]
      })]
    }), isActionable && /*#__PURE__*/_jsx(DropdownMenu, {
      options: options,
      placement: DROPDOWN_MENU_PLACEMENT_TYPES.BOTTOM_END,
      triggerHideChevron: true,
      triggerDynamicContent: getOptionsTriggerIcon,
      triggerIsIcon: true,
      triggerAriaLabelText: optionsTriggerAriaLabel,
      triggerButtonSize: "xs",
      onSelect: handleSelect,
      triggerClassName: "chat-item-menu"
    })]
  });
}
ChatMessageHeaderBase.displayName = 'ChatMessageHeader';
export const ChatMessageHeader = /*#__PURE__*/memo(ChatMessageHeaderBase);