"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactTransitionGroup = require("react-transition-group");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Translate = require("../Translate");
var _Heading = _interopRequireDefault(require("../Heading"));
var _Button = _interopRequireDefault(require("../Button"));
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

/**
 * `Panel` component is used for visually grouping some content.
 * @since 0.0.35
 */
const Panel = _ref => {
  let {
    baseClassName = `${_constants.CLS_PREFIX}panel`,
    className,
    title,
    collapsible = false,
    collapsed: externalCollapsed,
    onToggle,
    children,
    extra,
    ...props
  } = _ref;
  const rootRef = (0, _react.useRef)(null);
  const isControlled = externalCollapsed !== undefined;
  const [internalCollapsed, setInternalCollapsed] = (0, _react.useState)(false);
  const collapsed = isControlled ? externalCollapsed : internalCollapsed;
  const handleToggle = e => {
    if (!collapsible || (0, _utils.isClickable)(e)) return;
    if (!isControlled) {
      setInternalCollapsed(!collapsed);
    }
    onToggle?.(!collapsed);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
    classNames: `${baseClassName}-`,
    in: !collapsed,
    timeout: 300,
    nodeRef: rootRef,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)(baseClassName, {
        [`${baseClassName}--collapsible`]: collapsible,
        [`${baseClassName}--collapsed`]: collapsed,
        [`${baseClassName}--expanded`]: !collapsed
      }, className),
      ...props,
      ref: rootRef,
      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${baseClassName}__header`,
        onClick: handleToggle,
        children: [(0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
          component: "div",
          level: 4,
          className: `${baseClassName}__title`,
          children: title
        }) : title, (extra || collapsible) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: `${baseClassName}__extra`,
          children: [extra, collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
            ghost: true,
            className: `${baseClassName}__control-button`,
            icon: {
              name: 'chevron-up',
              flipVertical: collapsed
            },
            onClick: handleToggle
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__content`,
        children: children
      })]
    })
  });
};
var _default = exports.default = Panel;