import React, { useCallback, useRef, useState, useEffect } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { COLLAPSIBLE_PANEL_ACCENT_TYPES } from './types';
import { useNonNativeButtonAttrs } from '../hooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const 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 = COLLAPSIBLE_PANEL_ACCENT_TYPES.SECTION,
  transitionProps = {
    unmountOnExit: true,
    classNames: 'transition',
    timeout: 500
  },
  maxHeight
}) => {
  const [height, setHeight] = useState();
  const currentHeight = height === 0 ? undefined : height;
  const wrapperRef = useRef(null);
  const handleChange = useCallback(() => {
    if (onChange) {
      onChange(!expanded);
    }
  }, [expanded, onChange]);
  useEffect(() => {
    if (expanded && wrapperRef.current && shouldScrollIntoView) {
      wrapperRef.current.scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      });
    }
  }, [expanded, shouldScrollIntoView]);
  const attrs = 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__*/_jsxs("div", {
    ...attrs,
    /* <- onClick is hidden in attrs */
    className: classNames('collapsible-panel-header', headerClassName, {
      disabled: isDisabled,
      'content-header-expanded': expanded
    }),
    "test-id": headerTestId,
    "aria-label": headerAriaLabel,
    "aria-expanded": expanded,
    children: [header, /*#__PURE__*/_jsx("div", {
      className: "arrow-container",
      children: /*#__PURE__*/_jsx("span", {
        className: classNames('collapsible-panel-chevron', chevronClassName),
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faChevronDown
        })
      })
    })]
  });
  return /*#__PURE__*/_jsxs("div", {
    "test-id": "collapsible-panel",
    className: classNames(className, accentType, 'collapsible-panel', {
      'collapsible-panel-expanded': expanded
    }),
    children: [headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.TOP && headerContainer, /*#__PURE__*/_jsx(CSSTransition, {
      ...transitionProps,
      nodeRef: wrapperRef,
      in: expanded,
      onEntering: onEntering,
      onEntered: onEntered,
      onExit: onExit,
      onExiting: onExiting,
      onExited: onExited,
      children: /*#__PURE__*/_jsx("div", {
        style: {
          height: currentHeight,
          maxHeight
        },
        ref: wrapperRef,
        className: classNames('collapsible-content', {
          'content-wrapper-collapsed': isRenderedAndCollapsed
        }),
        "test-id": "collapsible-content",
        children: accentType === COLLAPSIBLE_PANEL_ACCENT_TYPES.STANDALONE ? /*#__PURE__*/_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]
  });
};
export default CollapsiblePanel;