import { jsxs as n, jsx as d, Fragment as f } from "react/jsx-runtime";
import { forwardRef as j } from "react";
import { cx as r } from "../../utils/classNames.js";
import { useArrowTheme as A } from "../../hooks/useArrowTheme.js";
function F() {
  return /* @__PURE__ */ d(
    "svg",
    {
      role: "img",
      "aria-label": "error",
      width: "12",
      height: "12",
      viewBox: "0 0 24 24",
      fill: "currentColor",
      children: /* @__PURE__ */ d("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
    }
  );
}
function P() {
  return /* @__PURE__ */ d(
    "svg",
    {
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      children: /* @__PURE__ */ d("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })
    }
  );
}
function q() {
  return /* @__PURE__ */ d(
    "svg",
    {
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      children: /* @__PURE__ */ d("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })
    }
  );
}
function G({ id: e, behavior: t, items: l, role: a, a11yLabelledBy: c }) {
  const b = t !== "Multi select" && l.every((i) => !!i.icon), o = "option";
  return /* @__PURE__ */ d(
    "ul",
    {
      className: "tdds-menu",
      role: a,
      "aria-labelledby": c || void 0,
      tabIndex: 0,
      id: e,
      children: l.filter((i) => !!i.text).map((i) => /* @__PURE__ */ n(
        "li",
        {
          id: i.id,
          className: r({ "force-focus": !!i.focused }),
          role: o,
          "aria-selected": !!i.selected,
          "aria-disabled": i.disabled || void 0,
          children: [
            b && i.icon ? i.icon : null,
            /* @__PURE__ */ d("span", { children: i.text })
          ]
        },
        i.id
      ))
    }
  );
}
function H({ id: e, itemsSelected: t }) {
  return /* @__PURE__ */ n(
    "span",
    {
      className: "tdds-field__leading-decoration tdds-field__leading-decoration--badge",
      id: e,
      "aria-hidden": "true",
      children: [
        t,
        /* @__PURE__ */ d("span", { children: ", items selected" })
      ]
    }
  );
}
function J(e) {
  const t = e.selectedItems.length > 0 ? e.selectedItems[0].text : "";
  return /* @__PURE__ */ d(
    "button",
    {
      className: r("tdds-field__select", "tdds-menu__trigger", {
        "force-focus": !!e.focused
      }),
      "aria-controls": e.menuId,
      "aria-describedby": e.describedBy || void 0,
      "aria-disabled": e.disabled || void 0,
      "aria-expanded": e.isExpanded,
      "aria-haspopup": "listbox",
      "aria-labelledby": e.labelId,
      "aria-invalid": e.isInvalid || void 0,
      type: "button",
      role: "combobox",
      id: e.id,
      children: /* @__PURE__ */ d("span", { children: t })
    }
  );
}
function K(e) {
  const t = e.selectedItems.length, l = `${e.id}-selected-items-badge`, a = `${l} ${e.describedBy}`.trim();
  return /* @__PURE__ */ n(f, { children: [
    /* @__PURE__ */ d(H, { id: l, itemsSelected: t }),
    /* @__PURE__ */ d(
      "button",
      {
        className: r("tdds-field__select", "tdds-menu__trigger", {
          "force-focus": !!e.focused
        }),
        "aria-controls": e.menuId,
        "aria-describedby": a,
        "aria-disabled": e.disabled || void 0,
        "aria-expanded": e.isExpanded,
        "aria-haspopup": "listbox",
        "aria-labelledby": e.labelId,
        "aria-invalid": e.isInvalid || void 0,
        type: "button",
        role: "combobox",
        id: e.id
      }
    )
  ] });
}
function Q(e) {
  const t = (l) => {
    var a;
    (a = e.onValueChange) == null || a.call(e, l.target.value);
  };
  return /* @__PURE__ */ d(
    "input",
    {
      id: e.id,
      type: "text",
      role: "combobox",
      "aria-autocomplete": "none",
      "aria-expanded": e.isExpanded,
      "aria-controls": e.menuId,
      "aria-labelledby": e.labelId,
      className: r("tdds-field__select", "tdds-menu__trigger", {
        "force-focus": !!e.focused
      }),
      "aria-describedby": e.describedBy || void 0,
      "aria-disabled": e.disabled || void 0,
      "aria-invalid": e.isInvalid || void 0,
      readOnly: e.disabled || void 0,
      onChange: t
    }
  );
}
function U(e) {
  const t = (l) => {
    var a;
    (a = e.onValueChange) == null || a.call(e, l.target.value);
  };
  return /* @__PURE__ */ n(f, { children: [
    /* @__PURE__ */ d(
      "input",
      {
        className: r("tdds-field__select", "tdds-menu__trigger", {
          "force-focus": !!e.focused
        }),
        id: e.id,
        type: "text",
        role: "combobox",
        "aria-autocomplete": "none",
        "aria-controls": e.menuId,
        "aria-describedby": e.describedBy || void 0,
        "aria-disabled": e.disabled || void 0,
        "aria-expanded": e.isExpanded,
        "aria-invalid": e.isInvalid || void 0,
        "aria-labelledby": e.labelId,
        readOnly: e.disabled || void 0,
        onChange: t
      }
    ),
    /* @__PURE__ */ d("span", { className: "tdds-field__leading-decoration", children: /* @__PURE__ */ d(P, {}) }),
    e.value ? /* @__PURE__ */ d(
      "button",
      {
        className: "tdds-icon-button",
        "aria-label": "Clear",
        "aria-hidden": "true",
        disabled: e.disabled || void 0,
        "aria-disabled": e.disabled || void 0,
        tabIndex: -1,
        type: "button",
        onClick: e.onClear,
        children: /* @__PURE__ */ d(q, {})
      }
    ) : null
  ] });
}
const W = j(
  ({
    id: e,
    label: t,
    variant: l,
    menuItems: a,
    menuBehavior: c,
    expanded: b,
    disabled: o = !1,
    value: i,
    errorMessage: g = "",
    supportingText: v = "",
    inverse: S,
    active: C = !1,
    hover: N = !1,
    focused: B = !1,
    pressed: X,
    className: M,
    onValueChange: x,
    onItemSelect: Y,
    onClear: $,
    ...z
  }, E) => {
    const k = A(), T = S ?? k.inverse;
    if (!t || !e || !c || a.length < 1)
      return null;
    const h = `${e}-label`, _ = `${e}-menu`, I = a.filter((V) => !!V.selected), y = !!g.trim(), D = !!{
      searching: !!i && i !== t,
      selecting: c === "Single select" && I.length > 0,
      texting: !!i && i !== t
    }[l], L = y ? `${e}-error` : "", O = v ? `${e}-optional` : "", R = `${L} ${O}`.trim(), u = {
      id: e,
      labelId: h,
      menuId: _,
      disabled: o,
      selectedItems: I,
      describedBy: R,
      isInvalid: y,
      isExpanded: !!b,
      value: i,
      focused: B
    };
    let s;
    switch (l) {
      case "selecting":
        s = c === "Multi select" ? /* @__PURE__ */ d(K, { ...u }) : /* @__PURE__ */ d(J, { ...u });
        break;
      case "texting":
        s = /* @__PURE__ */ d(Q, { ...u, onValueChange: x });
        break;
      case "searching":
        s = /* @__PURE__ */ d(
          U,
          {
            ...u,
            onValueChange: x,
            onClear: $
          }
        );
        break;
      default:
        s = null;
    }
    const m = g.trim(), w = v.trim();
    return /* @__PURE__ */ n(
      "div",
      {
        ref: E,
        className: r("tdds-field", M),
        ...T ? { "data-inverse": "true" } : {},
        ...z,
        children: [
          /* @__PURE__ */ n(
            "div",
            {
              className: r("tdds-field__track", { "force-hover": !!N }),
              "data-active": String(C),
              "data-complete": String(!!D),
              "data-disabled": String(o),
              children: [
                /* @__PURE__ */ d("label", { id: h, className: "tdds-field__label", children: t }),
                s,
                /* @__PURE__ */ d(
                  G,
                  {
                    id: _,
                    behavior: c,
                    items: a,
                    role: "listbox",
                    a11yLabelledBy: h
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ d(
            "p",
            {
              id: `${e}-error`,
              className: "tdds-field__support tdds-field__support--error",
              "aria-hidden": !m || void 0,
              children: m ? /* @__PURE__ */ n(f, { children: [
                /* @__PURE__ */ d(F, {}),
                m
              ] }) : null
            }
          ),
          /* @__PURE__ */ d(
            "p",
            {
              id: `${e}-optional`,
              className: "tdds-field__support tdds-field__support--optional",
              "aria-hidden": !w || void 0,
              children: w || null
            }
          )
        ]
      }
    );
  }
);
W.displayName = "MenuDropdown";
export {
  W as MenuDropdown
};
//# sourceMappingURL=MenuDropdown.js.map
