import {
  Accordion
} from "./chunk-7JT4DKQA.js";
import {
  TextOrHTML
} from "./chunk-KTJCAQT4.js";
import {
  useBreakpoint
} from "./chunk-7FQ7SXK4.js";

// src/components/ExpandableText/ExpandableText.tsx
import classNames from "classnames/dedupe";
import { useEffect, useId, useRef, useState } from "react";
import "@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css";
import { jsx, jsxs } from "react/jsx-runtime";
var ExpandableText = ({ ref, ...props }) => {
  const {
    text,
    maxLines = 3,
    breakpoint,
    showText = "Read more",
    hideText = "Read less",
    className,
    textProps = {},
    accordionProps = {},
    onToggle,
    ...otherProps
  } = props;
  const [isExpanded, setIsExpanded] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(false);
  const textRef = useRef(null);
  const { down } = useBreakpoint();
  const baseId = useId();
  const expandButtonId = `expandable-text-expand-${baseId}`;
  const shouldCollapse = breakpoint ? down(breakpoint) : true;
  useEffect(() => {
    if (!shouldCollapse || !textRef.current) {
      setIsCollapsed(false);
      return;
    }
    const element = textRef.current;
    const isOverflowing = element.scrollHeight > element.clientHeight;
    setIsCollapsed(isOverflowing);
  }, [text, shouldCollapse, maxLines]);
  if (breakpoint && !shouldCollapse) {
    return /* @__PURE__ */ jsx("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx(TextOrHTML, { text, textWrapper: true, ...textProps }) });
  }
  const handleAccordionChange = (expanded) => {
    setIsExpanded(expanded);
    onToggle?.(expanded);
  };
  const classes = classNames("mobius-expandable-text", className);
  const textContainerClasses = classNames("mobius-expandable-text__content", {
    "mobius-expandable-text__content--collapsed": !isExpanded
  });
  const textContainerStyle = {
    "--line-clamp": maxLines
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      className: classes,
      "data-testid": "expandable-text",
      ...otherProps,
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            ref: textRef,
            className: textContainerClasses,
            style: textContainerStyle,
            "data-testid": "expandable-text-content",
            "aria-describedby": isCollapsed ? expandButtonId : void 0,
            children: /* @__PURE__ */ jsx(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
          }
        ),
        isCollapsed && /* @__PURE__ */ jsx(
          Accordion,
          {
            showText,
            hideText,
            headerPosition: "bottom",
            onChange: handleAccordionChange,
            onClick: (e) => {
              e?.stopPropagation();
            },
            id: expandButtonId,
            ...accordionProps
          }
        )
      ]
    }
  );
};
ExpandableText.displayName = "ExpandableText";

export {
  ExpandableText
};
//# sourceMappingURL=chunk-HUSMC5GZ.js.map
