// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

import { useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { isLikeText } from '../Translate';
import Heading from '../Heading';
import Button from '../Button';
import { isClickable } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * `Panel` component is used for visually grouping some content.
 * @since 0.0.35
 */
const Panel = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}panel`,
    className,
    title,
    collapsible = false,
    collapsed: externalCollapsed,
    onToggle,
    children,
    extra,
    ...props
  } = _ref;
  const rootRef = useRef(null);
  const isControlled = externalCollapsed !== undefined;
  const [internalCollapsed, setInternalCollapsed] = useState(false);
  const collapsed = isControlled ? externalCollapsed : internalCollapsed;
  const handleToggle = e => {
    if (!collapsible || isClickable(e)) return;
    if (!isControlled) {
      setInternalCollapsed(!collapsed);
    }
    onToggle?.(!collapsed);
  };
  return /*#__PURE__*/_jsx(CSSTransition, {
    classNames: `${baseClassName}-`,
    in: !collapsed,
    timeout: 300,
    nodeRef: rootRef,
    children: /*#__PURE__*/_jsxs("div", {
      className: classNames(baseClassName, {
        [`${baseClassName}--collapsible`]: collapsible,
        [`${baseClassName}--collapsed`]: collapsed,
        [`${baseClassName}--expanded`]: !collapsed
      }, className),
      ...props,
      ref: rootRef,
      children: [title && /*#__PURE__*/_jsxs("div", {
        className: `${baseClassName}__header`,
        onClick: handleToggle,
        children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
          component: "div",
          level: 4,
          className: `${baseClassName}__title`,
          children: title
        }) : title, (extra || collapsible) && /*#__PURE__*/_jsxs("div", {
          className: `${baseClassName}__extra`,
          children: [extra, collapsible && /*#__PURE__*/_jsx(Button, {
            ghost: true,
            className: `${baseClassName}__control-button`,
            icon: {
              name: 'chevron-up',
              flipVertical: collapsed
            },
            onClick: handleToggle
          })]
        })]
      }), /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__content`,
        children: children
      })]
    })
  });
};
export default Panel;