import * as u from "react";
import { useStableCallback as N } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useStableCallback.js";
import { useIsoLayoutEffect as P } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
import { CompositeRoot as y } from "../../composite/root/CompositeRoot.js";
import { tabsStateAttributesMapping as z } from "../root/stateAttributesMapping.js";
import { useTabsRootContext as B } from "../root/TabsRootContext.js";
import { TabsListContext as E } from "./TabsListContext.js";
import { jsx as T } from "react/jsx-runtime";
import { EMPTY_ARRAY as F } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js";
const H = /* @__PURE__ */ u.forwardRef(function(i, e) {
  const {
    activateOnFocus: r = !1,
    className: n,
    loopFocus: t = !0,
    render: o,
    ...c
  } = i, {
    getTabElementBySelectedValue: s,
    onValueChange: a,
    orientation: f,
    value: p,
    setTabMap: A,
    tabActivationDirection: b
  } = B(), [d, m] = u.useState(0), [g, R] = u.useState(null), I = k(
    p,
    // the old value
    f,
    g,
    s
  ), v = N((h, C) => {
    if (h !== p) {
      const L = I(h);
      C.activationDirection = L, a(h, C);
    }
  }), M = u.useMemo(() => ({
    orientation: f,
    tabActivationDirection: b
  }), [f, b]), D = {
    "aria-orientation": f === "vertical" ? "vertical" : void 0,
    role: "tablist"
  }, S = u.useMemo(() => ({
    activateOnFocus: r,
    highlightedTabIndex: d,
    onTabActivation: v,
    setHighlightedTabIndex: m,
    tabsListElement: g,
    value: p
  }), [r, d, v, m, g, p]);
  return /* @__PURE__ */ T(E.Provider, {
    value: S,
    children: /* @__PURE__ */ T(y, {
      render: o,
      className: n,
      state: M,
      refs: [e, R],
      props: [D, c],
      stateAttributesMapping: z,
      highlightedIndex: d,
      enableHomeAndEndKeys: !0,
      loopFocus: t,
      orientation: f,
      onHighlightedIndexChange: m,
      onMapChange: A,
      disabledIndices: F
    })
  });
});
process.env.NODE_ENV !== "production" && (H.displayName = "TabsList");
function x(l, i) {
  const {
    left: e,
    top: r
  } = l.getBoundingClientRect(), {
    left: n,
    top: t
  } = i.getBoundingClientRect(), o = e - n, c = r - t;
  return {
    left: o,
    top: c
  };
}
function k(l, i, e, r) {
  const [n, t] = u.useState(null);
  return P(() => {
    if (l == null || e == null) {
      t(null);
      return;
    }
    const o = r(l);
    if (o == null) {
      t(null);
      return;
    }
    const {
      left: c,
      top: s
    } = x(o, e);
    t(i === "horizontal" ? c : s);
  }, [i, r, e, l]), u.useCallback((o) => {
    if (o === l)
      return "none";
    if (o == null)
      return t(null), "none";
    if (o != null && e != null) {
      const c = r(o);
      if (c != null) {
        const {
          left: s,
          top: a
        } = x(c, e);
        if (n == null)
          return t(i === "horizontal" ? s : a), "none";
        if (i === "horizontal") {
          if (s < n)
            return t(s), "left";
          if (s > n)
            return t(s), "right";
        } else {
          if (a < n)
            return t(a), "up";
          if (a > n)
            return t(a), "down";
        }
      }
    }
    return "none";
  }, [r, i, n, e, l]);
}
export {
  H as TabsList
};
