"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _reactTransitionGroup = require("react-transition-group");
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
 */
class Panel extends _react.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "handleToggle", e => {
      if ((0, _utils.isClickable)(e)) {
        return;
      }
      this.setState(_ref => {
        let {
          collapsed
        } = _ref;
        return {
          collapsed: !collapsed
        };
      }, () => {
        if (this.props.onToggle) {
          this.props.onToggle(this.state.collapsed);
        }
      });
    });
    const _collapsed2 = this.props.collapsible && this.props.collapsed || false;
    // eslint-disable-next-line react/state-in-constructor
    this.state = {
      collapsed: _collapsed2,
      prevPropsCollapsed: _collapsed2
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.collapsed !== state.prevPropsCollapsed) {
      return {
        collapsed: props.collapsed,
        prevPropsCollapsed: props.collapsed
      };
    }
    return null;
  }
  render() {
    const {
      baseClassName,
      className,
      title,
      collapsible,
      collapsed: _collapsed,
      onToggle,
      children,
      extra,
      ...props
    } = this.props;
    const {
      collapsed
    } = this.state;
    const handleToggle = collapsible ? this.handleToggle : undefined;
    const rootRef = /*#__PURE__*/(0, _react.createRef)();
    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
        })]
      })
    });
  }
}
(0, _defineProperty2.default)(Panel, "defaultProps", {
  collapsible: false,
  collapsed: false,
  baseClassName: `${_constants.CLS_PREFIX}panel`
});
var _default = exports.default = Panel;