import _e from "./index-objectWithoutPropertiesLoose.js";
import h from "./index-extends.js";
import * as i from "react";
import { isFragment as Ve } from "react-is";
import r from "./index-_virtual16.js";
import { clsx as M } from "./index-clsx.js";
import { useRtl as Ye } from "./index-RtlProvider.js";
import k from "./index-styled.js";
import He from "./index-useTheme.js";
import Ue from "./index-animate.js";
import $e from "./index-ScrollbarSize.js";
import Z, { getTabsUtilityClass as Ke } from "./index-tabsClasses.js";
import { jsx as z, jsxs as Se } from "react/jsx-runtime";
import { useDefaultProps as qe } from "./index-DefaultPropsProvider.js";
import Ge from "./index-TabScrollButton.js";
import ye from "./index-useSlotProps.js";
import ee from "./index-useEventCallback2.js";
import Je from "./index-ownerWindow2.js";
import Qe from "./index-composeClasses.js";
import Ze from "./index-debounce3.js";
import et from "./index-ownerDocument2.js";
import { getNormalizedScrollLeft as tt, detectScrollType as ot } from "./index-scrollLeft.js";
import rt from "./index-refType.js";
const lt = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"], we = (l, o) => l === o ? l.firstChild : o && o.nextElementSibling ? o.nextElementSibling : l.firstChild, Be = (l, o) => l === o ? l.lastChild : o && o.previousElementSibling ? o.previousElementSibling : l.lastChild, F = (l, o, c) => {
  let v = !1, f = c(l, o);
  for (; f; ) {
    if (f === l.firstChild) {
      if (v)
        return;
      v = !0;
    }
    const u = f.disabled || f.getAttribute("aria-disabled") === "true";
    if (!f.hasAttribute("tabindex") || u)
      f = c(l, f);
    else {
      f.focus();
      return;
    }
  }
}, nt = (l) => {
  const {
    vertical: o,
    fixed: c,
    hideScrollbar: v,
    scrollableX: f,
    scrollableY: u,
    centered: X,
    scrollButtonsHideMobile: _,
    classes: V
  } = l;
  return Qe({
    root: ["root", o && "vertical"],
    scroller: ["scroller", c && "fixed", v && "hideScrollbar", f && "scrollableX", u && "scrollableY"],
    flexContainer: ["flexContainer", o && "flexContainerVertical", X && "centered"],
    indicator: ["indicator"],
    scrollButtons: ["scrollButtons", _ && "scrollButtonsHideMobile"],
    scrollableX: [f && "scrollableX"],
    hideScrollbar: [v && "hideScrollbar"]
  }, Ke, V);
}, st = k("div", {
  name: "MuiTabs",
  slot: "Root",
  overridesResolver: (l, o) => {
    const {
      ownerState: c
    } = l;
    return [{
      [`& .${Z.scrollButtons}`]: o.scrollButtons
    }, {
      [`& .${Z.scrollButtons}`]: c.scrollButtonsHideMobile && o.scrollButtonsHideMobile
    }, o.root, c.vertical && o.vertical];
  }
})(({
  ownerState: l,
  theme: o
}) => h({
  overflow: "hidden",
  minHeight: 48,
  // Add iOS momentum scrolling for iOS < 13.0
  WebkitOverflowScrolling: "touch",
  display: "flex"
}, l.vertical && {
  flexDirection: "column"
}, l.scrollButtonsHideMobile && {
  [`& .${Z.scrollButtons}`]: {
    [o.breakpoints.down("sm")]: {
      display: "none"
    }
  }
})), at = k("div", {
  name: "MuiTabs",
  slot: "Scroller",
  overridesResolver: (l, o) => {
    const {
      ownerState: c
    } = l;
    return [o.scroller, c.fixed && o.fixed, c.hideScrollbar && o.hideScrollbar, c.scrollableX && o.scrollableX, c.scrollableY && o.scrollableY];
  }
})(({
  ownerState: l
}) => h({
  position: "relative",
  display: "inline-block",
  flex: "1 1 auto",
  whiteSpace: "nowrap"
}, l.fixed && {
  overflowX: "hidden",
  width: "100%"
}, l.hideScrollbar && {
  // Hide dimensionless scrollbar on macOS
  scrollbarWidth: "none",
  // Firefox
  "&::-webkit-scrollbar": {
    display: "none"
    // Safari + Chrome
  }
}, l.scrollableX && {
  overflowX: "auto",
  overflowY: "hidden"
}, l.scrollableY && {
  overflowY: "auto",
  overflowX: "hidden"
})), it = k("div", {
  name: "MuiTabs",
  slot: "FlexContainer",
  overridesResolver: (l, o) => {
    const {
      ownerState: c
    } = l;
    return [o.flexContainer, c.vertical && o.flexContainerVertical, c.centered && o.centered];
  }
})(({
  ownerState: l
}) => h({
  display: "flex"
}, l.vertical && {
  flexDirection: "column"
}, l.centered && {
  justifyContent: "center"
})), ct = k("span", {
  name: "MuiTabs",
  slot: "Indicator",
  overridesResolver: (l, o) => o.indicator
})(({
  ownerState: l,
  theme: o
}) => h({
  position: "absolute",
  height: 2,
  bottom: 0,
  width: "100%",
  transition: o.transitions.create()
}, l.indicatorColor === "primary" && {
  backgroundColor: (o.vars || o).palette.primary.main
}, l.indicatorColor === "secondary" && {
  backgroundColor: (o.vars || o).palette.secondary.main
}, l.vertical && {
  height: "100%",
  width: 2,
  right: 0
})), dt = k($e)({
  overflowX: "auto",
  overflowY: "hidden",
  // Hide dimensionless scrollbar on macOS
  scrollbarWidth: "none",
  // Firefox
  "&::-webkit-scrollbar": {
    display: "none"
    // Safari + Chrome
  }
}), ge = {};
let Te = !1;
const ut = /* @__PURE__ */ i.forwardRef(function(o, c) {
  const v = qe({
    props: o,
    name: "MuiTabs"
  }), f = He(), u = Ye(), {
    "aria-label": X,
    "aria-labelledby": _,
    action: V,
    centered: Y = !1,
    children: H,
    className: Ce,
    component: te = "div",
    allowScrollButtonsMobile: oe = !1,
    indicatorColor: Ie = "primary",
    onChange: xe,
    orientation: y = "horizontal",
    ScrollButtonComponent: re = Ge,
    scrollButtons: I = "auto",
    selectionFollowsFocus: Ee,
    slots: R = {},
    slotProps: le = {},
    TabIndicatorProps: U = {},
    TabScrollButtonProps: P = {},
    textColor: ne = "primary",
    value: D,
    variant: $ = "standard",
    visibleScrollbar: K = !1
  } = v, Oe = _e(v, lt), b = $ === "scrollable", p = y === "vertical", x = p ? "scrollTop" : "scrollLeft", L = p ? "top" : "left", W = p ? "bottom" : "right", q = p ? "clientHeight" : "clientWidth", E = p ? "height" : "width", g = h({}, v, {
    component: te,
    allowScrollButtonsMobile: oe,
    indicatorColor: Ie,
    orientation: y,
    vertical: p,
    scrollButtons: I,
    textColor: ne,
    variant: $,
    visibleScrollbar: K,
    fixed: !b,
    hideScrollbar: b && !K,
    scrollableX: b && !p,
    scrollableY: b && p,
    centered: Y && !b,
    scrollButtonsHideMobile: !oe
  }), w = nt(g), Ne = ye({
    elementType: R.StartScrollButtonIcon,
    externalSlotProps: le.startScrollButtonIcon,
    ownerState: g
  }), Me = ye({
    elementType: R.EndScrollButtonIcon,
    externalSlotProps: le.endScrollButtonIcon,
    ownerState: g
  });
  process.env.NODE_ENV;
  const [se, ze] = i.useState(!1), [T, ae] = i.useState(ge), [ie, ke] = i.useState(!1), [ce, Re] = i.useState(!1), [de, Pe] = i.useState(!1), [ue, De] = i.useState({
    overflow: "hidden",
    scrollbarWidth: 0
  }), fe = /* @__PURE__ */ new Map(), S = i.useRef(null), C = i.useRef(null), be = () => {
    const e = S.current;
    let t;
    if (e) {
      const s = e.getBoundingClientRect();
      t = {
        clientWidth: e.clientWidth,
        scrollLeft: e.scrollLeft,
        scrollTop: e.scrollTop,
        scrollLeftNormalized: tt(e, u ? "rtl" : "ltr"),
        scrollWidth: e.scrollWidth,
        top: s.top,
        bottom: s.bottom,
        left: s.left,
        right: s.right
      };
    }
    let n;
    if (e && D !== !1) {
      const s = C.current.children;
      if (s.length > 0) {
        const a = s[fe.get(D)];
        process.env.NODE_ENV, n = a ? a.getBoundingClientRect() : null, process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && !Te && n && n.width === 0 && n.height === 0 && // if the whole Tabs component is hidden, don't warn
        t.clientWidth !== 0 && (t = null, Te = !0);
      }
    }
    return {
      tabsMeta: t,
      tabMeta: n
    };
  }, O = ee(() => {
    const {
      tabsMeta: e,
      tabMeta: t
    } = be();
    let n = 0, s;
    if (p)
      s = "top", t && e && (n = t.top - e.top + e.scrollTop);
    else if (s = u ? "right" : "left", t && e) {
      const d = u ? e.scrollLeftNormalized + e.clientWidth - e.scrollWidth : e.scrollLeft;
      n = (u ? -1 : 1) * (t[s] - e[s] + d);
    }
    const a = {
      [s]: n,
      // May be wrong until the font is loaded.
      [E]: t ? t[E] : 0
    };
    if (isNaN(T[s]) || isNaN(T[E]))
      ae(a);
    else {
      const d = Math.abs(T[s] - a[s]), m = Math.abs(T[E] - a[E]);
      (d >= 1 || m >= 1) && ae(a);
    }
  }), G = (e, {
    animation: t = !0
  } = {}) => {
    t ? Ue(x, S.current, e, {
      duration: f.transitions.duration.standard
    }) : S.current[x] = e;
  }, pe = (e) => {
    let t = S.current[x];
    p ? t += e : (t += e * (u ? -1 : 1), t *= u && ot() === "reverse" ? -1 : 1), G(t);
  }, he = () => {
    const e = S.current[q];
    let t = 0;
    const n = Array.from(C.current.children);
    for (let s = 0; s < n.length; s += 1) {
      const a = n[s];
      if (t + a[q] > e) {
        s === 0 && (t = e);
        break;
      }
      t += a[q];
    }
    return t;
  }, Le = () => {
    pe(-1 * he());
  }, We = () => {
    pe(he());
  }, je = i.useCallback((e) => {
    De({
      overflow: null,
      scrollbarWidth: e
    });
  }, []), Ae = () => {
    const e = {};
    e.scrollbarSizeListener = b ? /* @__PURE__ */ z(dt, {
      onChange: je,
      className: M(w.scrollableX, w.hideScrollbar)
    }) : null;
    const n = b && (I === "auto" && (ie || ce) || I === !0);
    return e.scrollButtonStart = n ? /* @__PURE__ */ z(re, h({
      slots: {
        StartScrollButtonIcon: R.StartScrollButtonIcon
      },
      slotProps: {
        startScrollButtonIcon: Ne
      },
      orientation: y,
      direction: u ? "right" : "left",
      onClick: Le,
      disabled: !ie
    }, P, {
      className: M(w.scrollButtons, P.className)
    })) : null, e.scrollButtonEnd = n ? /* @__PURE__ */ z(re, h({
      slots: {
        EndScrollButtonIcon: R.EndScrollButtonIcon
      },
      slotProps: {
        endScrollButtonIcon: Me
      },
      orientation: y,
      direction: u ? "left" : "right",
      onClick: We,
      disabled: !ce
    }, P, {
      className: M(w.scrollButtons, P.className)
    })) : null, e;
  }, me = ee((e) => {
    const {
      tabsMeta: t,
      tabMeta: n
    } = be();
    if (!(!n || !t)) {
      if (n[L] < t[L]) {
        const s = t[x] + (n[L] - t[L]);
        G(s, {
          animation: e
        });
      } else if (n[W] > t[W]) {
        const s = t[x] + (n[W] - t[W]);
        G(s, {
          animation: e
        });
      }
    }
  }), j = ee(() => {
    b && I !== !1 && Pe(!de);
  });
  i.useEffect(() => {
    const e = Ze(() => {
      S.current && O();
    });
    let t;
    const n = (d) => {
      d.forEach((m) => {
        m.removedNodes.forEach((N) => {
          var B;
          (B = t) == null || B.unobserve(N);
        }), m.addedNodes.forEach((N) => {
          var B;
          (B = t) == null || B.observe(N);
        });
      }), e(), j();
    }, s = Je(S.current);
    s.addEventListener("resize", e);
    let a;
    return typeof ResizeObserver < "u" && (t = new ResizeObserver(e), Array.from(C.current.children).forEach((d) => {
      t.observe(d);
    })), typeof MutationObserver < "u" && (a = new MutationObserver(n), a.observe(C.current, {
      childList: !0
    })), () => {
      var d, m;
      e.clear(), s.removeEventListener("resize", e), (d = a) == null || d.disconnect(), (m = t) == null || m.disconnect();
    };
  }, [O, j]), i.useEffect(() => {
    const e = Array.from(C.current.children), t = e.length;
    if (typeof IntersectionObserver < "u" && t > 0 && b && I !== !1) {
      const n = e[0], s = e[t - 1], a = {
        root: S.current,
        threshold: 0.99
      }, d = (Q) => {
        ke(!Q[0].isIntersecting);
      }, m = new IntersectionObserver(d, a);
      m.observe(n);
      const N = (Q) => {
        Re(!Q[0].isIntersecting);
      }, B = new IntersectionObserver(N, a);
      return B.observe(s), () => {
        m.disconnect(), B.disconnect();
      };
    }
  }, [b, I, de, H == null ? void 0 : H.length]), i.useEffect(() => {
    ze(!0);
  }, []), i.useEffect(() => {
    O();
  }), i.useEffect(() => {
    me(ge !== T);
  }, [me, T]), i.useImperativeHandle(V, () => ({
    updateIndicator: O,
    updateScrollButtons: j
  }), [O, j]);
  const ve = /* @__PURE__ */ z(ct, h({}, U, {
    className: M(w.indicator, U.className),
    ownerState: g,
    style: h({}, T, U.style)
  }));
  let A = 0;
  const Fe = i.Children.map(H, (e) => {
    if (!/* @__PURE__ */ i.isValidElement(e))
      return null;
    process.env.NODE_ENV !== "production" && Ve(e);
    const t = e.props.value === void 0 ? A : e.props.value;
    fe.set(t, A);
    const n = t === D;
    return A += 1, /* @__PURE__ */ i.cloneElement(e, h({
      fullWidth: $ === "fullWidth",
      indicator: n && !se && ve,
      selected: n,
      selectionFollowsFocus: Ee,
      onChange: xe,
      textColor: ne,
      value: t
    }, A === 1 && D === !1 && !e.props.tabIndex ? {
      tabIndex: 0
    } : {}));
  }), Xe = (e) => {
    const t = C.current, n = et(t).activeElement;
    if (n.getAttribute("role") !== "tab")
      return;
    let a = y === "horizontal" ? "ArrowLeft" : "ArrowUp", d = y === "horizontal" ? "ArrowRight" : "ArrowDown";
    switch (y === "horizontal" && u && (a = "ArrowRight", d = "ArrowLeft"), e.key) {
      case a:
        e.preventDefault(), F(t, n, Be);
        break;
      case d:
        e.preventDefault(), F(t, n, we);
        break;
      case "Home":
        e.preventDefault(), F(t, null, we);
        break;
      case "End":
        e.preventDefault(), F(t, null, Be);
        break;
    }
  }, J = Ae();
  return /* @__PURE__ */ Se(st, h({
    className: M(w.root, Ce),
    ownerState: g,
    ref: c,
    as: te
  }, Oe, {
    children: [J.scrollButtonStart, J.scrollbarSizeListener, /* @__PURE__ */ Se(at, {
      className: w.scroller,
      ownerState: g,
      style: {
        overflow: ue.overflow,
        [p ? `margin${u ? "Left" : "Right"}` : "marginBottom"]: K ? void 0 : -ue.scrollbarWidth
      },
      ref: S,
      children: [/* @__PURE__ */ z(it, {
        "aria-label": X,
        "aria-labelledby": _,
        "aria-orientation": y === "vertical" ? "vertical" : null,
        className: w.flexContainer,
        ownerState: g,
        onKeyDown: Xe,
        ref: C,
        role: "tablist",
        children: Fe
      }), se && ve]
    }), J.scrollButtonEnd]
  }));
});
process.env.NODE_ENV !== "production" && (ut.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Callback fired when the component mounts.
   * This is useful when you want to trigger an action programmatically.
   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
   *
   * @param {object} actions This object contains all possible actions
   * that can be triggered programmatically.
   */
  action: rt,
  /**
   * If `true`, the scroll buttons aren't forced hidden on mobile.
   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
   * @default false
   */
  allowScrollButtonsMobile: r.bool,
  /**
   * The label for the Tabs as a string.
   */
  "aria-label": r.string,
  /**
   * An id or list of ids separated by a space that label the Tabs.
   */
  "aria-labelledby": r.string,
  /**
   * If `true`, the tabs are centered.
   * This prop is intended for large views.
   * @default false
   */
  centered: r.bool,
  /**
   * The content of the component.
   */
  children: r.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: r.object,
  /**
   * @ignore
   */
  className: r.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: r.elementType,
  /**
   * Determines the color of the indicator.
   * @default 'primary'
   */
  indicatorColor: r.oneOfType([r.oneOf(["primary", "secondary"]), r.string]),
  /**
   * Callback fired when the value changes.
   *
   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
   * @param {any} value We default to the index of the child (number)
   */
  onChange: r.func,
  /**
   * The component orientation (layout flow direction).
   * @default 'horizontal'
   */
  orientation: r.oneOf(["horizontal", "vertical"]),
  /**
   * The component used to render the scroll buttons.
   * @default TabScrollButton
   */
  ScrollButtonComponent: r.elementType,
  /**
   * Determine behavior of scroll buttons when tabs are set to scroll:
   *
   * - `auto` will only present them when not all the items are visible.
   * - `true` will always present them.
   * - `false` will never present them.
   *
   * By default the scroll buttons are hidden on mobile.
   * This behavior can be disabled with `allowScrollButtonsMobile`.
   * @default 'auto'
   */
  scrollButtons: r.oneOf(["auto", !1, !0]),
  /**
   * If `true` the selected tab changes on focus. Otherwise it only
   * changes on activation.
   */
  selectionFollowsFocus: r.bool,
  /**
   * The extra props for the slot components.
   * You can override the existing props or add new ones.
   * @default {}
   */
  slotProps: r.shape({
    endScrollButtonIcon: r.oneOfType([r.func, r.object]),
    startScrollButtonIcon: r.oneOfType([r.func, r.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: r.shape({
    EndScrollButtonIcon: r.elementType,
    StartScrollButtonIcon: r.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
  /**
   * Props applied to the tab indicator element.
   * @default  {}
   */
  TabIndicatorProps: r.object,
  /**
   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
   * @default {}
   */
  TabScrollButtonProps: r.object,
  /**
   * Determines the color of the `Tab`.
   * @default 'primary'
   */
  textColor: r.oneOf(["inherit", "primary", "secondary"]),
  /**
   * The value of the currently selected `Tab`.
   * If you don't want any selected `Tab`, you can set this prop to `false`.
   */
  value: r.any,
  /**
   * Determines additional display behavior of the tabs:
   *
   *  - `scrollable` will invoke scrolling properties and allow for horizontally
   *  scrolling (or swiping) of the tab bar.
   *  - `fullWidth` will make the tabs grow to use all the available space,
   *  which should be used for small views, like on mobile.
   *  - `standard` will render the default state.
   * @default 'standard'
   */
  variant: r.oneOf(["fullWidth", "scrollable", "standard"]),
  /**
   * If `true`, the scrollbar is visible. It can be useful when displaying
   * a long vertical list of tabs.
   * @default false
   */
  visibleScrollbar: r.bool
});
export {
  ut as default
};
