import { jsxs as y, jsx as p, Fragment as R } from "react/jsx-runtime";
import { useRef as $, useId as C, useMemo as I, Children as B, isValidElement as H, useState as j, useEffect as M, useCallback as h } from "react";
import { CHILD_TAB_IDS_ATTRIBUTE as S, CHILD_HEADING_IDS_ATTRIBUTE as U } from "../../constants/index.js";
import { Classes as v } from "../../constants/selectors.js";
import { cn as u } from "../../utils/cn.js";
import { slugify as F } from "../../utils/slugify.js";
import { Icon as K } from "../icon/icon.js";
const k = "Tab Title", q = ({ children: b }) => /* @__PURE__ */ p(R, { children: b }), z = ({
  children: b,
  defaultTabIndex: g = 0,
  onTabChange: m,
  className: A,
  borderBottom: D,
  ariaLabel: w,
  panelsRef: E
}) => {
  const f = $([]), T = C(), o = I(
    () => B.toArray(b).filter(
      (t) => H(t)
    ),
    [b]
  ), s = I(
    () => o.map((t, e) => {
      if (t.props.id)
        return t.props.id;
      const r = t.props.title ?? k;
      return `${T}-${F(r)}-${e}`;
    }),
    [o, T]
  ), L = o.length > 0 ? Math.max(0, Math.min(g, o.length - 1)) : 0, [i, x] = j(L);
  M(() => {
    o.length > 0 && i >= o.length && x(o.length - 1);
  }, [o.length, i]);
  const l = h(
    (t) => {
      t !== i && (x(t), m == null || m(t));
    },
    [i, m]
  ), _ = h(
    (t, e) => {
      const r = o.length;
      if (r !== 0) {
        if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
          t.preventDefault();
          const a = t.key === "ArrowLeft" ? (e - 1 + r) % r : (e + 1) % r;
          l(a), setTimeout(() => {
            var n;
            (n = f.current[a]) == null || n.focus();
          }, 0);
        } else if (t.key === "Enter" || t.key === " ")
          t.preventDefault(), l(e);
        else if (t.key === "Home")
          t.preventDefault(), l(0), setTimeout(() => {
            var a;
            (a = f.current[0]) == null || a.focus();
          }, 0);
        else if (t.key === "End") {
          t.preventDefault();
          const a = r - 1;
          l(a), setTimeout(() => {
            var n;
            (n = f.current[a]) == null || n.focus();
          }, 0);
        }
      }
    },
    [o.length, l]
  );
  return /* @__PURE__ */ y(
    "div",
    {
      className: u(
        v.Tabs,
        "tabs tab-container",
        D && "border-stone-200 border-b pb-6 dark:border-stone-700",
        A
      ),
      children: [
        /* @__PURE__ */ p(
          "ul",
          {
            "aria-label": w ?? "Tabs",
            className: "not-prose mb-6 flex min-w-full flex-none gap-x-6 overflow-auto border-stone-200 border-b pb-px dark:border-stone-700",
            "data-component-part": "tabs-list",
            role: "tablist",
            children: o.map((t, e) => {
              const r = t.props.title ?? k, a = t.props.icon, n = t.props.iconType, N = t.props.iconLibrary, c = e === i;
              return /* @__PURE__ */ p(
                "li",
                {
                  "aria-controls": `panel-${s[e]}`,
                  "aria-selected": c,
                  className: "cursor-pointer",
                  "data-child-heading-ids": t.props[U],
                  "data-child-tab-ids": t.props[S],
                  "data-component-part": "tab",
                  id: s[e],
                  onClick: (d) => {
                    d.stopPropagation(), l(e);
                  },
                  onKeyDown: (d) => _(d, e),
                  ref: (d) => {
                    f.current[e] = d;
                  },
                  role: "tab",
                  tabIndex: c ? 0 : -1,
                  children: /* @__PURE__ */ y(
                    "div",
                    {
                      className: u(
                        "-mb-px flex max-w-max items-center gap-1.5 whitespace-nowrap border-b pt-3 pb-2.5 font-semibold text-sm leading-6",
                        c ? "border-current text-primary dark:text-primary-light" : "border-transparent text-stone-900 hover:border-stone-300 dark:text-stone-200 dark:hover:border-stone-700"
                      ),
                      "data-active": c,
                      "data-component-part": "tab-button",
                      "data-testid": `tab-${r}`,
                      children: [
                        a && /* @__PURE__ */ p(
                          K,
                          {
                            className: u(
                              "size-4 shrink-0",
                              c ? "bg-primary dark:bg-primary-light" : "bg-stone-900 dark:bg-stone-200",
                              v.TabIcon
                            ),
                            icon: a,
                            iconLibrary: N,
                            iconType: n,
                            overrideColor: !0
                          }
                        ),
                        r
                      ]
                    }
                  )
                },
                s[e]
              );
            })
          }
        ),
        /* @__PURE__ */ p("div", { "data-component-part": "tabs-panels", ref: E, children: o.map((t, e) => {
          const r = e === i;
          return /* @__PURE__ */ p(
            "div",
            {
              "aria-hidden": !r,
              "aria-labelledby": s[e],
              className: u(
                "prose dark:prose-invert overflow-x-auto",
                !r && "hidden"
              ),
              "data-component-part": "tab-content",
              id: `panel-${s[e]}`,
              role: "tabpanel",
              tabIndex: r ? 0 : -1,
              children: t.props.children
            },
            s[e]
          );
        }) })
      ]
    }
  );
}, X = Object.assign(z, {
  Item: q
});
export {
  X as Tabs
};
