"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Translate = _interopRequireDefault(require("../Translate"));
var _Link = _interopRequireDefault(require("../Link"));
var _useContentOverflow = require("./useContentOverflow");
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

/**
 * `Cuttable` component is used for showing and hiding part of content.
 * @since 0.0.42
 */
const Cuttable = _ref => {
  let {
    children,
    collapsed: externalCollapsed = true,
    maxHeight = '7rem',
    locale = {
      showMore: 'Show more',
      showLess: 'Show less'
    },
    className,
    baseClassName = `${_constants.CLS_PREFIX}cuttable`,
    ...props
  } = _ref;
  const contentRef = (0, _react.useRef)(null);
  const hiddenElementRef = (0, _react.useRef)(null);
  const [collapsed, setCollapsed] = (0, _react.useState)(externalCollapsed);
  const [prevExternalCollapsed, setPrevExternalCollapsed] = (0, _react.useState)(externalCollapsed);
  if (prevExternalCollapsed !== externalCollapsed) {
    setPrevExternalCollapsed(externalCollapsed);
    setCollapsed(externalCollapsed);
  }
  const actionLocaleKey = collapsed ? 'showMore' : 'showLess';
  const isContentOverflowing = (0, _useContentOverflow.useContentOverflow)({
    contentRef,
    hiddenElementRef,
    maxHeight
  });
  const toggle = () => setCollapsed(!collapsed);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--collapse`]: collapsed && isContentOverflowing,
      [`${baseClassName}--expand`]: !collapsed
    }, className),
    ...props,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: contentRef,
      className: `${baseClassName}__content`,
      style: {
        maxHeight
      },
      children: children
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: hiddenElementRef,
      className: `${baseClassName}__height-meter `,
      style: {
        height: maxHeight
      },
      "aria-hidden": true
    }), isContentOverflowing && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__action`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
        onClick: toggle,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: `Cuttable.${actionLocaleKey}`,
          fallback: locale[actionLocaleKey]
        })
      })
    })]
  });
};
var _default = exports.default = Cuttable;