"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.COLLAPSIBLE_PANEL_PLACEMENT = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactTransitionGroup = require("react-transition-group");
var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _types = require("./types");
var _hooks = require("../hooks");
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); }
const COLLAPSIBLE_PANEL_PLACEMENT = exports.COLLAPSIBLE_PANEL_PLACEMENT = {
  TOP: 'top',
  BOTTOM: 'bottom'
};
/** A CollapsiblePanel allows users to collapse or expand panel.
 * @midnight-gray-supported
 * @alpine-light-supported
 */
const CollapsiblePanel = ({
  children: childrenProp,
  className,
  expanded = false,
  isDisabled = false,
  shouldScrollIntoView = false,
  onChange,
  header,
  headerAriaLabel,
  headerTestId,
  headerClassName,
  chevronClassName,
  headerPlacement = COLLAPSIBLE_PANEL_PLACEMENT.TOP,
  collapsedContent,
  accentType = _types.COLLAPSIBLE_PANEL_ACCENT_TYPES.SECTION,
  transitionProps = {
    unmountOnExit: true,
    classNames: 'transition',
    timeout: 500
  },
  maxHeight
}) => {
  const [height, setHeight] = (0, _react.useState)();
  const currentHeight = height === 0 ? undefined : height;
  const wrapperRef = (0, _react.useRef)(null);
  const handleChange = (0, _react.useCallback)(() => {
    if (onChange) {
      onChange(!expanded);
    }
  }, [expanded, onChange]);
  (0, _react.useEffect)(() => {
    if (expanded && wrapperRef.current && shouldScrollIntoView) {
      wrapperRef.current.scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      });
    }
  }, [expanded, shouldScrollIntoView]);
  const attrs = (0, _hooks.useNonNativeButtonAttrs)({
    isDisabled,
    onClick: handleChange,
    onKeyDown: handleChange
  });
  const isRenderedAndCollapsed = transitionProps.unmountOnExit === false && transitionProps.mountOnEnter !== true && !expanded;
  const onEntering = () => setHeight(wrapperRef?.current?.scrollHeight);
  const onEntered = () => setHeight(0);
  const onExit = () => setHeight(wrapperRef?.current?.scrollHeight);
  const onExiting = () => setHeight(0);
  const onExited = () => setHeight(0);
  const headerContainer = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ...attrs,
    /* <- onClick is hidden in attrs */
    className: (0, _classnames.default)('collapsible-panel-header', headerClassName, {
      disabled: isDisabled,
      'content-header-expanded': expanded
    }),
    "test-id": headerTestId,
    "aria-label": headerAriaLabel,
    "aria-expanded": expanded,
    children: [header, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "arrow-container",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: (0, _classnames.default)('collapsible-panel-chevron', chevronClassName),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: _faChevronDown.faChevronDown
        })
      })
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "test-id": "collapsible-panel",
    className: (0, _classnames.default)(className, accentType, 'collapsible-panel', {
      'collapsible-panel-expanded': expanded
    }),
    children: [headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.TOP && headerContainer, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
      ...transitionProps,
      nodeRef: wrapperRef,
      in: expanded,
      onEntering: onEntering,
      onEntered: onEntered,
      onExit: onExit,
      onExiting: onExiting,
      onExited: onExited,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          height: currentHeight,
          maxHeight
        },
        ref: wrapperRef,
        className: (0, _classnames.default)('collapsible-content', {
          'content-wrapper-collapsed': isRenderedAndCollapsed
        }),
        "test-id": "collapsible-content",
        children: accentType === _types.COLLAPSIBLE_PANEL_ACCENT_TYPES.STANDALONE ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "collapsible-panel-standalone-inner-content",
          "test-id": "collapsible-panel-standalone-inner-content",
          children: childrenProp
        }) : childrenProp
      })
    }), !expanded && collapsedContent, headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.BOTTOM && headerContainer]
  });
};
var _default = exports.default = CollapsiblePanel;