import * as i from "react";
import { ownerDocument as T } 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/owner.js";
import { useIsoLayoutEffect 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/useIsoLayoutEffect.js";
import { useBaseUiId as U } from "../../utils/useBaseUiId.js";
import { useRenderElement as k } from "../../utils/useRenderElement.js";
import { ACTIVE_COMPOSITE_ITEM as H } from "../../composite/constants.js";
import { useCompositeItem as K } from "../../composite/item/useCompositeItem.js";
import { useTabsRootContext as S } from "../root/TabsRootContext.js";
import { useTabsListContext as W } from "../list/TabsListContext.js";
import { createChangeEventDetails as E } from "../../utils/createBaseUIEventDetails.js";
import { activeElement as j, contains as q } from "../../floating-ui-react/utils/element.js";
import { useButton as z } from "../../use-button/useButton.js";
import { none as R } from "../../utils/reason-parts.js";
const G = /* @__PURE__ */ i.forwardRef(function(l, g) {
  const {
    className: Q,
    disabled: e = !1,
    render: X,
    value: o,
    id: I,
    nativeButton: P = !0,
    ...h
  } = l, {
    value: C,
    getTabPanelIdByValue: D,
    orientation: d
  } = S(), {
    activateOnFocus: x,
    highlightedTabIndex: p,
    onTabActivation: b,
    setHighlightedTabIndex: u,
    tabsListElement: v
  } = W(), c = U(I), B = i.useMemo(() => ({
    disabled: e,
    id: c,
    value: o
  }), [e, c, o]), {
    compositeProps: M,
    compositeRef: N,
    index: r
    // hook is used instead of the CompositeItem component
    // because the index is needed for Tab internals
  } = K({
    metadata: B
  }), n = o === C, f = i.useRef(!1);
  F(() => {
    if (f.current) {
      f.current = !1;
      return;
    }
    if (!(n && r > -1 && p !== r))
      return;
    const t = v;
    if (t != null) {
      const s = j(T(t));
      if (s && q(t, s))
        return;
    }
    e || u(r);
  }, [n, r, p, u, e, v]);
  const {
    getButtonProps: w,
    buttonRef: y
  } = z({
    disabled: e,
    native: P,
    focusableWhenDisabled: !0
  }), L = D(o), a = i.useRef(!1), m = i.useRef(!1);
  function O(t) {
    n || e || b(o, E(R, t.nativeEvent, void 0, {
      activationDirection: "none"
    }));
  }
  function V(t) {
    n || (r > -1 && !e && u(r), !e && x && (!a.current || // keyboard or touch focus
    a.current && m.current) && b(o, E(R, t.nativeEvent, void 0, {
      activationDirection: "none"
    })));
  }
  function _(t) {
    if (n || e)
      return;
    a.current = !0;
    function s() {
      a.current = !1, m.current = !1;
    }
    (!t.button || t.button === 0) && (m.current = !0, T(t.currentTarget).addEventListener("pointerup", s, {
      once: !0
    }));
  }
  const A = i.useMemo(() => ({
    disabled: e,
    active: n,
    orientation: d
  }), [e, n, d]);
  return k("button", l, {
    state: A,
    ref: [g, y, N],
    props: [M, {
      role: "tab",
      "aria-controls": L,
      "aria-selected": n,
      id: c,
      onClick: O,
      onFocus: V,
      onPointerDown: _,
      [H]: n ? "" : void 0,
      onKeyDownCapture() {
        f.current = !0;
      }
    }, h, w]
  });
});
process.env.NODE_ENV !== "production" && (G.displayName = "TabsTab");
export {
  G as TabsTab
};
