import { jsx as l, jsxs as p } from "react/jsx-runtime";
import { useRef as b, useState as v, Children as x, isValidElement as h, useEffect as m } from "react";
import g from "../../foundation/Icon/Generated/IconQuestionMarkCircle.es.js";
import { IconSize as k } from "../../foundation/Icon/IconSize.es.js";
import { generateRandomId as y } from "../../utilities/generateRandomId.es.js";
import { merge as n } from "../../utilities/merge.es.js";
import { RadioButtonEmphasis as z } from "./RadioButton.es.js";
import { LegacyTooltip as T, TooltipPosition as N, TooltipAlignment as L } from "../LegacyTooltip/LegacyTooltip.es.js";
var R = /* @__PURE__ */ ((o) => (o.Horizontal = "Horizontal", o.Vertical = "Vertical", o))(R || {});
const V = ({
  children: o,
  defaultValue: a,
  direction: u = "Horizontal",
  onChange: s,
  name: d = "default-radio",
  ariaLabel: f
}) => {
  const i = b(null), [r, c] = v(a), w = x.map(o, (e) => h(e) ? e == null ? void 0 : e.props : null) ?? [];
  return m(() => {
    c(a);
  }, [a]), m(() => {
    if (i.current) {
      const e = i.current.querySelector(`input[value="${r}"]`);
      e && e.focus();
    }
  }, [r]), /* @__PURE__ */ l(
    "div",
    {
      "data-test-id": "radio-list-wrapper",
      role: "radiogroup",
      "aria-label": f ?? "Choose an option",
      ref: i,
      className: n(["tw-flex", u === "Horizontal" ? "tw-gap-4" : "tw-flex-col"]),
      children: w.map((e) => {
        const t = y();
        return /* @__PURE__ */ p("div", { className: "tw-flex tw-items-center tw-mb-2", children: [
          /* @__PURE__ */ l(
            "input",
            {
              "data-test-id": "radio-input",
              disabled: e.disabled,
              id: t,
              type: "radio",
              name: d,
              value: e.value,
              "aria-label": e.hideLabel ? e.value : void 0,
              "aria-labelledby": e.hideLabel ? void 0 : `${t}-label`,
              "aria-describedby": !e.hideLabel && e.helperText ? `${t}-description` : void 0,
              "aria-checked": e.value === r,
              defaultChecked: e.value === r,
              className: n([
                "tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2",
                e.emphasis === z.Weak ? "tw-text-black-80" : "tw-text-box-selected-strong"
              ]),
              onChange: () => {
                c(e.value), s && s(e.value);
              }
            }
          ),
          !e.hideLabel && /* @__PURE__ */ p(
            "label",
            {
              id: `${t}-label`,
              htmlFor: t,
              className: n([
                "tw-flex tw-flex-col tw-pl-2 tw-text-sm tw-font-normal peer-checked:tw-font-medium tw-text-black-80 peer-disabled:tw-text-black-40"
              ]),
              "data-test-id": "radio-label",
              children: [
                e.value,
                e.helperText && /* @__PURE__ */ l("span", { id: `${t}-description`, className: "tw-text-black-80 tw-font-normal", children: e.helperText })
              ]
            }
          ),
          e.tooltip && /* @__PURE__ */ l(
            T,
            {
              alignment: L.Middle,
              content: e.tooltip,
              hoverDelay: 75,
              position: N.Top,
              triggerElement: /* @__PURE__ */ l("button", { type: "button", className: "tw-flex tw-text-black-80 tw-mx-2 tw-self-center", children: /* @__PURE__ */ l(g, { size: k.Size16 }) }),
              withArrow: !0
            }
          )
        ] }, t);
      })
    }
  );
};
export {
  V as RadioList,
  R as RadioListDirection
};
//# sourceMappingURL=RadioList.es.js.map
