"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FloatingPanel = FloatingPanel;
var _reactDom = _interopRequireDefault(require("react-dom"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _core = require("@popperjs/core");
var _faGripVertical = require("@fortawesome/free-solid-svg-icons/faGripVertical");
var _reactPopper = require("../react-popper");
var _hooks = require("../hooks");
var _constants = require("./constants");
var _useFloatingPanelState = require("./use-floating-panel-state");
var _draggableArea = require("./draggable-area");
var _floatingPanelHeader = require("./floating-panel-header");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const noop = () => false;

/**
 * Floating panel
 * @midnight-gray-supported
 * @uxr-only-supported
 * @alpine-light-supported
 */
function FloatingPanel({
  children,
  minHeight = 648,
  minWidth = 380,
  maxWidth = 900,
  maxHeight = 800,
  anchorEl,
  dockEl,
  pageContentEl,
  initialState,
  testId = 'floating-panel',
  placement = 'bottom',
  popperModifiers = [_reactPopper.OFFSET_MODIFIER],
  onClose = noop,
  actions,
  dragIcon = _faGripVertical.faGripVertical,
  ...props
}) {
  const containerElement = (0, _constants.getHtmlElement)(dockEl) || document.getElementById('floating-panel-root') || document.body;
  const initialStateAppliedOnce = (0, _react.useRef)(false);
  const {
    t
  } = (0, _hooks.useTranslation)();
  const {
    panelRef,
    headerRef,
    style,
    onResize,
    onMovementStart,
    onResizeEnd,
    setPosition,
    isDocked,
    isCollapsed,
    setIsDocked,
    getPosition,
    context
  } = (0, _useFloatingPanelState.useFloatingPanelState)({
    minHeight,
    minWidth,
    maxWidth,
    maxHeight,
    initialState,
    isDocked: props.isDocked ?? false,
    setIsDocked: props.setIsDocked ?? noop,
    isCollapsed: props.isCollapsed ?? false,
    setIsCollapsed: props.setIsCollapsed ?? noop,
    containerElement,
    pageContentElement: (0, _constants.getHtmlElement)(pageContentEl)
  });

  // use @popperjs/core to set initial position for the panel
  (0, _react.useLayoutEffect)(() => {
    if (!panelRef.current) {
      return;
    }
    panelRef.current.focus();
    if (initialState && !initialStateAppliedOnce.current) {
      initialStateAppliedOnce.current = true;
      return setPosition(initialState);
    }
    if (!anchorEl) {
      return;
    }
    const popperInstance = (0, _core.createPopper)((0, _constants.getHtmlElement)(anchorEl), panelRef.current, {
      placement,
      strategy: 'fixed',
      modifiers: popperModifiers,
      onFirstUpdate: () => {
        const {
          left,
          top
        } = panelRef.current.getBoundingClientRect();
        setPosition(state => ({
          ...state,
          left,
          top
        }));
        popperInstance.destroy();
      }
    });
  }, [placement]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_constants.FloatingPanelContext.Provider, {
    value: context,
    children: /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
      ref: panelRef,
      "test-id": testId,
      className: (0, _classnames.default)('floating-panel', {
        docked: isDocked,
        collapsed: isCollapsed
      })
      /* eslint-disable-next-line react/forbid-dom-props */,
      style: style,
      "aria-modal": "true",
      role: "dialog",
      "aria-label": props.ariaLabel || t('Floating panel'),
      "aria-describedby": "floating-panel-content",
      tabIndex: -1,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingPanelHeader.FloatingPanelHeader, {
        ref: headerRef,
        onClose: onClose,
        getPosition: getPosition,
        isDocked: isDocked,
        setIsDocked: setIsDocked,
        actions: actions,
        dragIcon: dragIcon
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        id: "floating-panel-content",
        className: "floating-panel-content",
        children: children
      }), !isDocked && _constants.resizeHandles.map(handle => /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableArea.DraggableArea, {
        areaId: handle.id,
        className: (0, _classnames.default)('resize-handle', handle.id),
        onDrag: onResize,
        onDragStart: onMovementStart,
        onDragEnd: onResizeEnd
      }, handle.id))]
    }), containerElement)
  });
}