import { jsxs as I, jsx as o } from "react/jsx-runtime";
import { useFocusRing as M } from "@react-aria/focus";
import { setInteractionModality as $ } from "@react-aria/interactions";
import { useRadio as A, useRadioGroup as L } from "@react-aria/radio";
import { VisuallyHidden as G } from "@react-aria/visually-hidden";
import { useRadioGroupState as T } from "@react-stately/radio";
import { motion as H } from "framer-motion";
import { forwardRef as O, useRef as N, useMemo as V, useState as U, useLayoutEffect as Y } from "react";
import { useMemoizedId as _ } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as q } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
const v = (w) => w.icon !== void 0, j = O((w, n) => {
  const { id: u, item: e, disabled: l, radioGroupState: s, size: g } = w, d = N(null), x = e.id === s.selectedValue, { inputProps: m } = A(
    {
      value: e.id,
      "aria-label": v(e) ? e.ariaLabel : e.value.toString(),
      isDisabled: l,
      id: x ? u : void 0
    },
    s,
    d
  ), { isFocusVisible: b, focusProps: i } = M(), h = () => {
    var f;
    l || (s.setSelectedValue(e.id), (f = d.current) == null || f.focus(), $("pointer"));
  }, S = () => {
    switch (!0) {
      case v(e):
        return "fondue-segmented-controls-item-icon";
      case typeof e.value == "string":
        return "fondue-segmented-controls-item-text";
      default:
        return "fondue-segmented-controls-item-number";
    }
  };
  return /* @__PURE__ */ I("div", { ref: n, className: p(["tw-relative", b && q]), children: [
    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o("input", { ...m, ...i, "data-test-id": "fondue-segmented-controls-input", ref: d }) }),
    /* @__PURE__ */ o(
      "div",
      {
        onClick: h,
        role: "none",
        "data-test-id": S(),
        className: p([
          "tw-relative tw-w-full tw-py-1.5 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
          g === "small" ? "tw-px-2" : "tw-px-4",
          x && !l ? "tw-transition tw-ease-in-out tw-delay-300 tw-text-text tw-bg-base" : "tw-text-text-weak",
          l ? "tw-text-box-disabled-inverse tw-bg-box-disabled tw-h-[2.15rem] tw-rounded hover:tw-cursor-not-allowed tw-border-line-x-strong" : "hover:tw-text-text hover:tw-cursor-pointer"
        ]),
        children: /* @__PURE__ */ I("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex tw-items-center", children: [
          v(e) && /* @__PURE__ */ o("span", { className: "tw-leading-3", children: e.icon }),
          e.value && /* @__PURE__ */ o("span", { className: v(e) ? "tw-ml-2" : "", children: e.value.toString() })
        ] })
      }
    )
  ] }, e.id);
});
j.displayName = "SegmentedControlsItem";
const z = ({
  id: w,
  items: n,
  activeItemId: u,
  onChange: e,
  ariaLabel: l = "SegmentedControls",
  disabled: s = !1,
  hugWidth: g = !1,
  size: d
}) => {
  const x = V(() => n.some((t) => !t.disabled), [n]), m = _(w), b = { onChange: e, value: u, label: l, isDisabled: s }, i = T(b), { radioGroupProps: h, labelProps: S } = L(b, i), f = N([]), R = N(null), [P, k] = U(null), B = V(() => n.map((t, r) => /* @__PURE__ */ o(
    j,
    {
      id: m,
      item: t,
      disabled: t.disabled ?? s,
      radioGroupState: i,
      ref: (a) => f.current[r] = a,
      size: d
    },
    `fondue-segmented-controls-${m}-item-${t.id}`
  )), [n, m, s, i, d]), y = x ? n.findIndex((t, r) => {
    const a = t.id === i.selectedValue;
    if (t.disabled && a)
      if (r > 0) {
        const c = r - 1;
        i.setSelectedValue(n[c].id);
      } else {
        const c = r + 1;
        i.setSelectedValue(n[c].id);
      }
    return a;
  }) : -1, D = g ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly";
  return Y(() => {
    const t = f.current[y];
    if (t && R.current) {
      const r = R.current.getBoundingClientRect(), a = t.getBoundingClientRect();
      let c = a.left - r.left, C = a.width;
      y === 0 ? (c -= 1, C += 2) : C += 1;
      const E = C / r.width * 100, F = c / r.width * 100;
      k({ width: `${E}%`, left: `${F}%` });
    }
  }, [u, y, d]), /* @__PURE__ */ I("div", { className: p([g ? "tw-inline-flex" : "tw-flex", "tw-relative"]), children: [
    /* @__PURE__ */ o(
      "fieldset",
      {
        ...h,
        "data-test-id": "fondue-segmented-controls",
        className: p([
          "tw-relative tw-divide-x tw-divide-line-strong tw-w-full tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-sm tw-select-none",
          D
        ]),
        ref: R,
        children: B
      }
    ),
    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o("span", { ...S, children: l }) }),
    u && P && /* @__PURE__ */ o(
      H.div,
      {
        "aria-hidden": "true",
        animate: P,
        initial: !1,
        transition: { type: "tween", duration: 0.3 },
        className: p([
          "tw-absolute tw-h-9 tw-box-border tw-border tw-rounded tw-pointer-events-none tw-top-0",
          s ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-transparent"
        ])
      }
    )
  ] });
};
z.displayName = "FondueSegmentedControls";
export {
  z as SegmentedControls
};
//# sourceMappingURL=SegmentedControls.es.js.map
