"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = VerticalCollapsiblePanelGroup;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _throttle = _interopRequireDefault(require("lodash-es/throttle"));
var _collapsiblePanel = require("../collapsible-panel");
var _infoIcon = require("../info-icon");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 VerticalCollapsiblePanelGroupHeader({
  label,
  icon,
  badge,
  infoText
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "vertical-collapsible-panel-group-header-container",
    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: icon
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: label
    }), badge, infoText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_infoIcon.InfoIcon, {
      children: infoText
    }) : null]
  });
}

/** Vertical container gathering several collapsible panels that do not overflow container when opened
 * @uxr-only-supported
 * @midnight-gray-supported
 */
function VerticalCollapsiblePanelGroup({
  collapsiblePanels = [],
  expandedItemId,
  setExpandedItemId,
  className
}) {
  const containerRef = (0, _react.useRef)(null);
  const accordionsContainerRef = (0, _react.useRef)(null);
  const [maxHeight, setMaxHeight] = (0, _react.useState)();
  const toggleItem = (0, _react.useCallback)(id => {
    // if opened item clicked - close it, if closed item clicked - set currently opened item id to the passed id
    const nextExpandedId = id === expandedItemId ? null : id;
    // if expanded id is null (all items are closed) - calculate available space for the items
    const newMaxHeight = expandedItemId ? maxHeight : containerRef?.current?.clientHeight - accordionsContainerRef?.current?.clientHeight;
    setMaxHeight(newMaxHeight);
    setExpandedItemId(nextExpandedId);
  }, [expandedItemId]);
  (0, _react.useEffect)(() => {
    const handler = (0, _throttle.default)(() => {
      // we are interested in changing anything only if we have opened accordion
      if (expandedItemId) {
        // calculate the difference between container and accordions container and add that diff to maxHeight
        const heightDifference = containerRef?.current?.clientHeight - accordionsContainerRef?.current?.clientHeight;
        setMaxHeight(maxHeight + heightDifference);
      }
    }, 200);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [expandedItemId, maxHeight]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)('vertical-collapsible-panel-group-container', className),
    ref: containerRef,
    "test-id": "vertical-collapsible-panel-group-container",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "accordions-container",
      ref: accordionsContainerRef,
      children: collapsiblePanels.map(collapsiblePanelItemConfig => {
        const {
          id,
          isDisabled,
          content,
          headerLabel,
          headerIcon,
          headerBadge,
          headerInfoIconText,
          headerTestId
        } = collapsiblePanelItemConfig;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsiblePanel.CollapsiblePanel, {
          expanded: expandedItemId === id,
          isDisabled: isDisabled,
          onChange: () => toggleItem(id),
          accentType: _collapsiblePanel.COLLAPSIBLE_PANEL_ACCENT_TYPES.PANEL,
          maxHeight: maxHeight,
          headerTestId: headerTestId,
          header: /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCollapsiblePanelGroupHeader, {
            label: headerLabel,
            icon: headerIcon,
            badge: headerBadge,
            infoText: headerInfoIconText
          }),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "vertical-collapsible-panel-group-content",
            children: content
          })
        }, id);
      })
    })
  });
}