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

/* eslint-disable react/no-deprecated */
import React, { Component } from 'react';
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';

/**
 * `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(({
        collapsed
      }) => ({
        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;
    return /*#__PURE__*/React.createElement("div", _extends({
      className: classNames(baseClassName, {
        ["".concat(baseClassName, "--collapsible")]: collapsible,
        ["".concat(baseClassName, "--collapsed")]: collapsed,
        ["".concat(baseClassName, "--expanded")]: !collapsed
      }, className)
    }, props), title && /*#__PURE__*/React.createElement("div", {
      className: "".concat(baseClassName, "__header"),
      onClick: handleToggle
    }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
      component: "div",
      level: 4,
      className: "".concat(baseClassName, "__title")
    }, title) : title, (extra || collapsible) && /*#__PURE__*/React.createElement("div", {
      className: "".concat(baseClassName, "__extra")
    }, extra, collapsible && /*#__PURE__*/React.createElement(Button, {
      ghost: true,
      className: "".concat(baseClassName, "__control-button"),
      icon: {
        name: 'chevron-up',
        flipVertical: collapsed
      },
      onClick: handleToggle
    }))), /*#__PURE__*/React.createElement("div", {
      className: "".concat(baseClassName, "__content")
    }, children));
  }

}

_defineProperty(Panel, "defaultProps", {
  collapsible: false,
  collapsed: false,
  baseClassName: "".concat(CLS_PREFIX, "panel")
});

export default Panel;