import { jsxs as m, Fragment as U, jsx as o } from "react/jsx-runtime";
import { useFocusRing as V } from "@react-aria/focus";
import { useRef as K, useState as y, Children as A, isValidElement as O, useCallback as P, useEffect as L, cloneElement as z } from "react";
import Y from "../../foundation/Icon/Generated/IconDotsHorizontal.es.js";
import { useMemoizedId as W } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_VISIBLE_STYLE_INSET as H, FOCUS_STYLE as X, FOCUS_VISIBLE_STYLE as q } from "../../utilities/focusStyle.es.js";
import { merge as g } from "../../utilities/merge.es.js";
import { Badge as B } from "../Badge/Badge.es.js";
import { motion as G } from "../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
var J = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Large = "Large", l))(J || {});
const Q = {
  None: "tw-pl-0",
  XSmall: "tw-pl-xs",
  Small: "tw-pl-s",
  Medium: "tw-pl-m",
  Large: "tw-pl-l"
}, Z = (l, p) => l.disabled ? "tw-text-text-disabled" : l.id === p ? "tw-font-medium tw-text-text" : "tw-text-text-weak hover:tw-text-text", tt = ({
  paddingX: l,
  size: p,
  activeItemId: i,
  children: v,
  onChange: E,
  maxHeight: C,
  minHeight: I
}) => {
  const F = W(), S = K(null), [N, $] = y(!1), [w, c] = y(!1), b = A.map(v, (t) => O(t) ? t == null ? void 0 : t.props : null) ?? [], [D, R] = y([0]), d = P(() => {
    const t = S.current;
    $((t && t.scrollWidth > t.clientWidth) ?? !1);
    const r = [];
    if (t) {
      for (const e of t.children) {
        const s = [...t.children].indexOf(e), f = t.getBoundingClientRect(), u = e.getBoundingClientRect();
        (u.right > f.right || u.left < f.left) && r.push(s);
      }
      const n = [...r].sort((e, s) => e - s);
      R(n);
    }
  }, []), x = () => D.map((t) => b[t]), k = (t, r) => {
    const n = t.findIndex((e) => e.id === i);
    return t.filter((e, s) => r === "next" && s > n && !e.disabled || r === "previous" && s < n && !e.disabled ? e : !1);
  }, T = (t) => {
    ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(t.key) && t.stopPropagation();
    const r = x(), n = t.target, e = n.id.includes("-m"), s = n.id.replace("-btn-m", ""), f = e ? r : b, u = k(f, "next"), h = k(f, "previous");
    (t.key === "ArrowRight" || t.key === "ArrowDown") && u.length > 0 && a(u[0].id, e), (t.key === "ArrowLeft" || t.key === "ArrowUp") && h.length > 0 && a(h[h.length - 1].id, e), t.key === "Enter" && e && (a(s, !0), c(!1), document.getElementById(`${s}-content`).focus()), n.id.includes("-m") || c(!1);
  }, a = (t, r) => {
    try {
      const n = document.getElementById(`${t}-btn`), e = document.getElementById(
        r ? `${t}-btn-m` : `${t}-btn`
      );
      E && E(t), N && n.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), e.focus();
    } catch (n) {
      throw new Error(n.message);
    }
  }, j = (t) => {
    d();
    const r = x();
    if (t.key === "Enter" && !w && r.length > 0) {
      const n = document.getElementById(`${r[0].id}-btn-m`);
      n && n.focus();
    }
    w && (t.key === "ArrowRight" || t.key === "ArrowDown") && a(r[0].id, !0);
  };
  L(() => {
    d();
  }, [d]), L(() => (window.addEventListener("resize", d), () => {
    window.removeEventListener("resize", d);
  }), [d]);
  const { isFocusVisible: M, focusProps: _ } = V();
  return /* @__PURE__ */ m(U, { children: [
    /* @__PURE__ */ m("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line", children: [
      /* @__PURE__ */ o(
        "div",
        {
          ref: S,
          role: "tablist",
          className: g([
            "tw-overflow-x-hidden tw-h-full tw-w-full tw-flex tw-justify-start",
            Q[
              l ?? "Small"
              /* Small */
            ],
            p === "Small" ? "tw-gap-xxs" : "tw-gap-xs "
          ]),
          children: b.map((t) => /* @__PURE__ */ m(
            "button",
            {
              "data-test-id": "tab-item",
              role: "tab",
              type: "button",
              "aria-selected": t.id === i,
              "aria-controls": `${t.id}-content`,
              "aria-hidden": t.disabled,
              tabIndex: t.id === i ? 0 : -1,
              id: `${t.id}-btn`,
              className: g([
                "tw-group tw-relative tw-mx-0 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap",
                Z(t, i),
                H,
                p === "Small" ? "tw-h-12 tw-text-body-medium" : "tw-h-14 tw-text-body-large"
              ]),
              onClick: () => {
                t.disabled || (a(t.id, !1), c(!1));
              },
              onKeyDown: (r) => T(r),
              children: [
                t.decorator && /* @__PURE__ */ o("span", { className: "tw-mr-1.5", children: t.decorator }),
                /* @__PURE__ */ o("span", { children: t.label }),
                t.badge && /* @__PURE__ */ o("span", { className: "tw-ml-1.5", children: /* @__PURE__ */ o(B, { disabled: t.disabled, style: t.badge.style, children: t.badge.children }) }),
                t.id === i && /* @__PURE__ */ o(
                  G.div,
                  {
                    initial: !1,
                    layoutDependency: i,
                    "data-test-id": "tab-active-highlight",
                    layoutId: F,
                    className: "tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0"
                  }
                )
              ]
            },
            t.id
          ))
        }
      ),
      N && /* @__PURE__ */ m(
        "div",
        {
          "data-test-id": "tab-overflow",
          className: "tw-z-50 tw-flex-grow tw-pl-3 tw-flex tw-justify-center tw-items-center",
          children: [
            /* @__PURE__ */ o(
              "button",
              {
                className: g([
                  "tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center",
                  M ? X : ""
                ]),
                type: "button",
                onClick: () => {
                  d(), c(!w);
                },
                onKeyDown: (t) => j(t),
                ..._,
                children: /* @__PURE__ */ o(Y, {})
              }
            ),
            w && /* @__PURE__ */ o(
              "div",
              {
                className: "tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max",
                role: "dialog",
                children: x().map((t) => {
                  var r, n;
                  return /* @__PURE__ */ m(
                    "button",
                    {
                      className: g([
                        "tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak",
                        t.disabled && "tw-text-text-disabled",
                        q
                      ]),
                      onClick: () => {
                        t.disabled || (a(t.id, !0), c(!1));
                      },
                      role: "tab",
                      type: "button",
                      "aria-selected": t.id === i,
                      "aria-controls": `${t.id}-content`,
                      "aria-hidden": t.disabled,
                      tabIndex: !t.disabled && w ? 0 : -1,
                      id: `${t.id}-btn-m`,
                      onKeyDown: (e) => T(e),
                      children: [
                        t.decorator,
                        /* @__PURE__ */ o("span", { className: "tw-mr-1 tw-ml-1.5", children: t.label }),
                        t.badge && /* @__PURE__ */ o(B, { disabled: t.disabled, style: (r = t.badge) == null ? void 0 : r.style, children: (n = t.badge) == null ? void 0 : n.children })
                      ]
                    },
                    t.id
                  );
                })
              }
            )
          ]
        }
      )
    ] }),
    /* @__PURE__ */ o("div", { "data-test-id": "tab-content", className: "tw-flex tw-flex-col tw-overflow-y-auto", children: /* @__PURE__ */ o("div", { className: "tw-mr-0", style: { maxHeight: C, minHeight: I }, children: A.map(v, (t) => O(t) ? z(t, { ...t.props, active: t.props.id === i }) : null) }) })
  ] });
};
tt.displayName = "FondueTabs";
export {
  J as TabSize,
  tt as Tabs
};
//# sourceMappingURL=Tabs.es.js.map
