'use strict';
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { scrollListItemIntoView, setListItemTextOverflowing } from './ListItem.funcs.js';
import { useState, useEffect } from 'react';
import { wellKnownPositions } from '../../../../base-repo/constants/tools-constants.js';
import { Tooltip } from '../../tooltip/Tooltip.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
});
function ListItem({
  className,
  showTooltip,
  children,
  onNavigate,
  active
}) {
  const [isTextOverflowing, setIsTextOverflowing] = useState(false);
  const textRef = useEmptyRef();
  const containerRef = useEmptyRef();
  useEffect(() => {
    if (containerRef?.current && active) scrollListItemIntoView(containerRef?.current);
  }, [active, containerRef]);
  useEffect(() => {
    if (textRef.current && containerRef.current) {
      setListItemTextOverflowing(textRef.current.scrollWidth, containerRef.current.clientWidth, setIsTextOverflowing, showTooltip);
    }
  }, [showTooltip, textRef, containerRef]);
  return /* @__PURE__ */jsx(Tooltip, {
    className: "text-popover ml-2 max-w-60 rounded p-2 text-pretty shadow",
    disabled: !isTextOverflowing,
    side: wellKnownPositions.right,
    content: children,
    arrow: true,
    children: /* @__PURE__ */jsxs("li", {
      className: cn("hover:bg-muted-foreground relative z-1 w-full rounded-md p-2", className, active && "bg-fd-tertiary-700 text-white"),
      onClick: onNavigate,
      ref: containerRef,
      children: [/* @__PURE__ */jsx("span", {
        ref: textRef,
        children
      }), isTextOverflowing && /* @__PURE__ */jsx("span", {
        className: "absolute top-1/2 right-0 z-0 h-full w-10 -translate-y-1/2"
      })]
    })
  });
}
__name(ListItem, "ListItem");

export { ListItem };
