// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { useRef, useState } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Translate from '../Translate';
import Link from '../Link';
import { useContentOverflow } from './useContentOverflow';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * `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 = `${CLS_PREFIX}cuttable`,
    ...props
  } = _ref;
  const contentRef = useRef(null);
  const hiddenElementRef = useRef(null);
  const [collapsed, setCollapsed] = useState(externalCollapsed);
  const [prevExternalCollapsed, setPrevExternalCollapsed] = useState(externalCollapsed);
  if (prevExternalCollapsed !== externalCollapsed) {
    setPrevExternalCollapsed(externalCollapsed);
    setCollapsed(externalCollapsed);
  }
  const actionLocaleKey = collapsed ? 'showMore' : 'showLess';
  const isContentOverflowing = useContentOverflow({
    contentRef,
    hiddenElementRef,
    maxHeight
  });
  const toggle = () => setCollapsed(!collapsed);
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(baseClassName, {
      [`${baseClassName}--collapse`]: collapsed,
      [`${baseClassName}--expand`]: !collapsed
    }, className),
    ...props,
    children: [/*#__PURE__*/_jsx("div", {
      ref: contentRef,
      className: `${baseClassName}__content`,
      style: {
        maxHeight
      },
      children: children
    }), /*#__PURE__*/_jsx("div", {
      ref: hiddenElementRef,
      className: `${baseClassName}__height-meter `,
      style: {
        height: maxHeight
      },
      "aria-hidden": true
    }), isContentOverflowing && /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__action`,
      children: /*#__PURE__*/_jsx(Link, {
        onClick: toggle,
        children: /*#__PURE__*/_jsx(Translate, {
          content: `Cuttable.${actionLocaleKey}`,
          fallback: locale[actionLocaleKey]
        })
      })
    })]
  });
};
export default Cuttable;