import React, { useCallback, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import throttle from 'lodash-es/throttle';
import { COLLAPSIBLE_PANEL_ACCENT_TYPES, CollapsiblePanel } from '../collapsible-panel';
import { InfoIcon } from '../info-icon';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function VerticalCollapsiblePanelGroupHeader({
  label,
  icon,
  badge,
  infoText
}) {
  return /*#__PURE__*/_jsxs("div", {
    className: "vertical-collapsible-panel-group-header-container",
    children: [icon ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: icon
    }) : null, /*#__PURE__*/_jsx("span", {
      children: label
    }), badge, infoText ? /*#__PURE__*/_jsx(InfoIcon, {
      children: infoText
    }) : null]
  });
}

/** Vertical container gathering several collapsible panels that do not overflow container when opened
 * @uxr-only-supported
 * @midnight-gray-supported
 */
export default function VerticalCollapsiblePanelGroup({
  collapsiblePanels = [],
  expandedItemId,
  setExpandedItemId,
  className
}) {
  const containerRef = useRef(null);
  const accordionsContainerRef = useRef(null);
  const [maxHeight, setMaxHeight] = useState();
  const toggleItem = 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]);
  useEffect(() => {
    const handler = throttle(() => {
      // 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__*/_jsx("div", {
    className: classnames('vertical-collapsible-panel-group-container', className),
    ref: containerRef,
    "test-id": "vertical-collapsible-panel-group-container",
    children: /*#__PURE__*/_jsx("div", {
      className: "accordions-container",
      ref: accordionsContainerRef,
      children: collapsiblePanels.map(collapsiblePanelItemConfig => {
        const {
          id,
          isDisabled,
          content,
          headerLabel,
          headerIcon,
          headerBadge,
          headerInfoIconText,
          headerTestId
        } = collapsiblePanelItemConfig;
        return /*#__PURE__*/_jsx(CollapsiblePanel, {
          expanded: expandedItemId === id,
          isDisabled: isDisabled,
          onChange: () => toggleItem(id),
          accentType: COLLAPSIBLE_PANEL_ACCENT_TYPES.PANEL,
          maxHeight: maxHeight,
          headerTestId: headerTestId,
          header: /*#__PURE__*/_jsx(VerticalCollapsiblePanelGroupHeader, {
            label: headerLabel,
            icon: headerIcon,
            badge: headerBadge,
            infoText: headerInfoIconText
          }),
          children: /*#__PURE__*/_jsx("div", {
            className: "vertical-collapsible-panel-group-content",
            children: content
          })
        }, id);
      })
    })
  });
}