"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 _reactMeasure = _interopRequireDefault(require("react-measure"));
var _constants = require("../../constants");
var _Translate = _interopRequireDefault(require("../Translate"));
var _Link = _interopRequireDefault(require("../Link"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

/**
 * `Cuttable` component is used for showing and hiding part of content.
 * @since 0.0.42
 */
class Cuttable extends _react.Component {
  constructor() {
    super(...arguments);
    (0, _defineProperty2.default)(this, "state", {
      collapsed: undefined,
      autofit: true
    });
    (0, _defineProperty2.default)(this, "contentRef", /*#__PURE__*/(0, _react.createRef)());
    (0, _defineProperty2.default)(this, "handleToggle", () => {
      this.setState(_ref => {
        let {
          collapsed
        } = _ref;
        return {
          collapsed: !collapsed,
          autofit: false
        };
      });
    });
    (0, _defineProperty2.default)(this, "handleResize", () => {
      if (!this.state.autofit) {
        return;
      }
      const content = this.contentRef.current;
      if (content && content.scrollHeight > content.clientHeight) {
        this.setState({
          collapsed: this.props.collapsed
        });
      }
    });
  }
  render() {
    const {
      baseClassName,
      className,
      children,
      collapsed,
      maxHeight,
      locale,
      ...props
    } = this.props;
    const showMoreLessKey = this.state.collapsed ? 'showMore' : 'showLess';
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)(baseClassName, {
        [`${baseClassName}--collapse`]: this.state.collapsed === true,
        [`${baseClassName}--expand`]: this.state.collapsed === false
      }, className),
      ...props,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
        onResize: this.handleResize,
        innerRef: el => {
          this.contentRef.current = el;
        },
        children: _ref2 => {
          let {
            measureRef
          } = _ref2;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__content`,
            style: {
              maxHeight
            },
            ref: measureRef,
            children: children
          });
        }
      }), this.state.collapsed !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__action`,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
          onClick: this.handleToggle,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
            content: `Cuttable.${showMoreLessKey}`,
            fallback: locale[showMoreLessKey]
          })
        })
      })]
    });
  }
}
(0, _defineProperty2.default)(Cuttable, "defaultProps", {
  collapsed: true,
  maxHeight: '7rem',
  locale: {
    showMore: 'Show more',
    showLess: 'Show less'
  },
  baseClassName: `${_constants.CLS_PREFIX}cuttable`
});
var _default = exports.default = Cuttable;