import _defineProperty from "@babel/runtime/helpers/defineProperty";
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { Component, createRef } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { CSSTransition } from 'react-transition-group';
import { isLikeText } from '../Translate';
import Heading from '../Heading';
import Button from '../Button';
import { isClickable } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * `Panel` component is used for visually grouping some content.
 * @since 0.0.35
 */
class Panel extends Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "handleToggle", e => {
      if (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__*/createRef();
    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
        })]
      })
    });
  }
}
_defineProperty(Panel, "defaultProps", {
  collapsible: false,
  collapsed: false,
  baseClassName: `${CLS_PREFIX}panel`
});
export default Panel;