import { jsx as S } from "@emotion/react/jsx-runtime";
import { useState as M, useRef as r, useMemo as b, useCallback as q, useEffect as C } from "react";
import w from "lodash-es/throttle";
import { TypographyTextMarqueeContainerStyled as I, TypographyTextMarqueeStyled as O } from "../../slots/TabsNavigatorSlots.js";
import { TABS_NAVIGATOR_CLASSES as A } from "../../constants.js";
import P from "clsx";
const D = (v) => {
  const { children: h, speed: a = 3, ...R } = v, [y, E] = M(!1), i = r(null), f = r(null), x = r(!1), s = r(null), d = r(null), t = r(null), g = 100, T = b(() => g / a, [a]), m = q(() => {
    t.current !== null && cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
      t.current = null;
      const n = i.current, e = f.current;
      if (!n || !e)
        return;
      const o = e.clientWidth, c = n.scrollWidth, l = c > o;
      if (l !== x.current && (x.current = l, E(l)), l) {
        const u = c - o, p = Math.abs(u) / T;
        (s.current !== u || d.current !== p) && (s.current = u, d.current = p, e.style.setProperty("--scroll-distance", `${-u}px`), e.style.setProperty("--scroll-duration", `${p}s`));
      } else
        s.current !== null && (s.current = null, d.current = null, e.style.removeProperty("--scroll-distance"), e.style.removeProperty("--scroll-duration"));
    });
  }, [T]);
  return C(() => {
    m();
    const n = w(m, 16, {
      leading: !0,
      // Ejecutar inmediatamente la primera vez
      trailing: !0
      // Ejecutar también la última vez para no perder actualizaciones
    }), e = new ResizeObserver(() => {
      n();
    }), o = i.current, c = f.current;
    return o && e.observe(o), c && e.observe(c), () => {
      e.disconnect(), n.cancel(), t.current !== null && (cancelAnimationFrame(t.current), t.current = null);
    };
  }, [h, m]), /* @__PURE__ */ S(I, { ref: f, className: A.typographyTextMarqueeContainer, children: /* @__PURE__ */ S(
    O,
    {
      ref: i,
      className: P(A.typographyTextMarquee),
      ownerState: { shouldAnimate: y, speed: a },
      "data-should-animate": y,
      skeletonWidth: "30px",
      ...R,
      children: h
    }
  ) });
};
export {
  D as TextMarquee
};
