'use strict';
import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Tooltip } from '../tooltip/Tooltip.js';
import { checkFadeoutVisibility } from './FadeOutText.funcs.js';
import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const flexRowReverseStyele = "flex-row-reverse";
function FadeOutText({
  children,
  className,
  id,
  rightAlign,
  shouldHideTooltip,
  onTooltipClick,
  tooltipContent,
  ref
}) {
  const valueBlockRef = useEmptyRef();
  const [fadeoutVisible, setFadeoutVisible] = useState();
  useEffect(() => {
    checkFadeoutVisibility(setFadeoutVisible, valueBlockRef?.current ?? void 0);
  }, [children, valueBlockRef]);
  const textAlignmentClass = rightAlign ? flexRowReverseStyele : "";
  return /* @__PURE__ */jsx("div", {
    ref,
    className: "relative min-w-0 flex-1",
    children: /* @__PURE__ */jsx(Tooltip, {
      disabled: shouldHideTooltip,
      content: tooltipContent ?? children,
      className: cn(!fadeoutVisible && "hidden"),
      children: /* @__PURE__ */jsx("div", {
        id,
        ref: valueBlockRef,
        className: cn("flex w-full flex-row overflow-x-hidden text-nowrap", className, textAlignmentClass, fadeoutVisible && "mask-[linear-gradient(to_right,currentColor_87%,transparent_100%)]"),
        onClick: onTooltipClick,
        children
      })
    })
  });
}
__name(FadeOutText, "FadeOutText");
FadeOutText.displayName = "FadeOutText";

export { FadeOutText, flexRowReverseStyele };
