import React, { forwardRef, useContext } from 'react';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { Button, ACCENT_TYPES } from '../button';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useTranslation } from '../hooks/use-translation';
import { FloatingPanelDockButton } from './floating-panel-dock-button';
import { FloatingPanelDragHandle } from './floating-panel-drag-handle';
import { useDraggableArea } from './use-draggable-area';
import { FloatingPanelContext } from './constants';
import { FloatingPanelCollapseButton } from './floating-panel-collapse-button';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
  actions = null,
  onClose,
  isDocked,
  setIsDocked,
  getPosition,
  dragIcon
}, ref) => {
  const {
    t
  } = useTranslation();
  const {
    onDrag,
    onDragStart,
    onDragEnd,
    isCollapsed,
    setIsCollapsed
  } = useContext(FloatingPanelContext);
  const onStart = useDraggableArea({
    areaId: 'drag-header',
    onDrag,
    onDragStart,
    onDragEnd
  });
  return (
    /*#__PURE__*/
    // FloatingPanelDragHandle is responsible for accessibility of the drag handle
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    _jsxs("header", {
      ref: ref,
      className: "floating-panel-header",
      onMouseDown: onStart,
      children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {
        dragIcon: dragIcon
      }), /*#__PURE__*/_jsxs("div", {
        className: "actions",
        onMouseDown: event => {
          // Prevent dragging when clicking on action buttons
          event.stopPropagation();
        },
        children: [actions, /*#__PURE__*/_jsx(FloatingPanelCollapseButton, {
          isCollapsed: isCollapsed,
          setIsCollapsed: setIsCollapsed
        }), /*#__PURE__*/_jsx(FloatingPanelDockButton, {
          isDocked: isDocked,
          setIsDocked: setIsDocked
        }), /*#__PURE__*/_jsx(Button, {
          testId: "floating-panel-close-action",
          accentType: ACCENT_TYPES.ROUND_ICON,
          onClick: () => onClose(getPosition()),
          "aria-label": t('Close'),
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: faXmark
          })
        })]
      })]
    })
  );
});
FloatingPanelHeader.displayName = 'FloatingPanelHeader';