import { j as e } from "../../_virtual/jsx-runtime.js";
import { useRef as w, useState as n, useEffect as k } from "react";
import { Tab as z } from "./components/Tab.js";
import F from "../../icons/MoreHorizontal.js";
import { IconButton as N } from "../IconButton/index.js";
import { OpenTabs as V } from "./components/OpenTabs.js";
import { Wrapper as _, InnerWrapper as y, TabsContainer as A, TabIndicator as M, ExpandWrapper as P } from "./styles.js";
const X = 20;
function $({
  id: g,
  tabs: o,
  selectedTab: a,
  brandColor: E = !0,
  narrow: l = !1,
  showExpandButton: T = !1,
  title: q = "",
  dismissText: v = "Dismiss",
  onChange: c,
  rtl: f = !1,
  ...d
}) {
  var S;
  const u = w(null), r = w(null), [s, B] = n(), [p, h] = n(!1), [H, m] = n(!1), [O, x] = n(!1), [W, C] = n({
    left: 0,
    width: 0
  }), [R, D] = n(!1), j = r && r.current && r.current.offsetWidth;
  k(() => {
    const t = r.current;
    r && t && D(t.offsetWidth < t.scrollWidth);
  }, [r.current, l, window.innerWidth]), k(() => {
    s && s.current && C({
      left: s.current.offsetLeft,
      width: s.current.offsetWidth
    });
  }, [u.current, s == null ? void 0 : s.current, l, o, f]);
  function L(t) {
    const i = t.currentTarget;
    i.scrollWidth - i.scrollLeft === i.clientWidth ? m(!0) : m(!1);
  }
  function I() {
    h(!p), x(!1);
  }
  function b(t) {
    t.disabled || (x(!0), c(t), h(!1));
  }
  return /* @__PURE__ */ e.jsxs(_, { id: g, ref: u, rtl: f, children: [
    /* @__PURE__ */ e.jsxs(y, { children: [
      /* @__PURE__ */ e.jsxs(
        A,
        {
          ref: r,
          "data-testid": d["data-testid"],
          "data-trackid": d["data-trackid"],
          "aria-label": "tabs",
          role: "tablist",
          onScroll: L,
          children: [
            o.map((t) => /* @__PURE__ */ e.jsx(
              z,
              {
                tab: t,
                selected: t.value === a.value,
                setSelectedRef: B,
                narrow: l,
                expandClickFlag: O,
                onChange: c,
                disabled: t.disabled,
                testId: t.testId,
                trackId: t.trackId
              },
              t.value
            )),
            /* @__PURE__ */ e.jsx(
              M,
              {
                width: W.width,
                left: W.left,
                brandColor: E
              }
            )
          ]
        }
      ),
      R && !H && T && /* @__PURE__ */ e.jsx(
        P,
        {
          onClick: I,
          minHeight: ((S = r.current) == null ? void 0 : S.offsetHeight) ?? 0,
          left: j && j - X || 0,
          children: /* @__PURE__ */ e.jsx(
            N,
            {
              variant: "secondary",
              size: "small",
              icon: /* @__PURE__ */ e.jsx(F, {})
            }
          )
        }
      )
    ] }),
    /* @__PURE__ */ e.jsx(
      V,
      {
        showBottomSheet: p,
        tabs: o,
        selectedTab: a,
        dismissText: v,
        toggleBottomSheet: I,
        onExpandItemClick: b
      }
    )
  ] });
}
export {
  $ as Tabs
};
