import React, { useLayoutEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
import { Button, ACCENT_TYPES } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
 * @midnight-gray-supported
 * @alpine-light-supported
 */
const ExpandableContent = ({
  children,
  maxHeight,
  className
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isOverflowing, setIsOverflowing] = useState(false);
  const contentRef = useRef(null);
  const {
    t
  } = useTranslation();
  useLayoutEffect(() => {
    if (contentRef.current) {
      setIsOverflowing(contentRef.current.scrollHeight > maxHeight);
    }
  }, [children, maxHeight]);
  const isClipped = isOverflowing && !isExpanded;
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('expandable-content', className),
    "test-id": "expandable-content",
    children: [/*#__PURE__*/_jsx("div", {
      ref: contentRef,
      className: "expandable-content-body"
      // eslint-disable-next-line react/forbid-dom-props
      ,
      style: isClipped ? {
        maxHeight,
        overflow: 'hidden'
      } : undefined,
      "test-id": "expandable-content-body",
      children: children
    }), isOverflowing && /*#__PURE__*/_jsx(Button, {
      accentType: ACCENT_TYPES.GHOST,
      onClick: () => setIsExpanded(prev => !prev),
      className: "expandable-content-toggle",
      rightIcon: isExpanded ? faChevronUp : faChevronDown,
      testId: "expandable-content-toggle",
      children: isExpanded ? t('Show less') : t('Show more')
    })]
  });
};
export { ExpandableContent };