import { jsx as t, jsxs as x } from "react/jsx-runtime";
/* empty css                            */
import { classNames as I } from "./index-classNames.js";
import F from "./index-_virtual6.js";
import { InputBase as M } from "./index-InputBase.js";
import { Icon as c, IconSize as u } from "./index-Icon.js";
import { IconNames as p } from "./index-IconNames.js";
import { Text as d, TextTypes as T } from "./index-Text.js";
import R, { useState as m, useRef as z, useEffect as B } from "react";
import D from "./index-Box.js";
import W from "./index-FormControl2.js";
import _ from "./index-Select2.js";
import h from "./index-InputAdornment.js";
import j from "./index-MenuItem2.js";
const k = ["title"], ee = (P) => {
  const {
    options: o,
    searchableProps: f = k,
    onSelection: g,
    value: A,
    elementName: a,
    displayTotalCountThreshold: C = 5,
    displaySearchBarMinimumElements: O = 10,
    startAdornment: l
  } = P, [y, v] = m(!1), [E, N] = m([]), [i, S] = m(""), s = z(null), b = R.useMemo(() => F(o, {
    getText: (e) => f.map((r) => {
      const n = e[r];
      if (n == null) return "";
      if (typeof n == "string") return n;
      if (typeof n == "number") return n.toString();
      if (typeof n == "object")
        try {
          return JSON.stringify(n);
        } catch {
          return "";
        }
      return String(n);
    })
  }), [o, f]);
  return B(() => {
    let e = o.filter((r) => !r.hidden);
    i && (e = b(i).map((r) => r.item)), N(e);
  }, [i, o, b]), t(D, {
    className: I("vanguard-input", "vanguard-searchable-select-input"),
    children: t(W, {
      fullWidth: !0,
      children: x(_, {
        "data-testid": "vanguard-searchable-select-input",
        MenuProps: {
          anchorEl: s.current,
          // Disables auto focus on MenuItems and allows TextField to be in focus
          autoFocus: !1,
          marginThreshold: 0,
          MenuListProps: {
            style: {
              width: s && s.current ? s.current.offsetWidth - 8 : ""
            }
          }
        },
        style: y ? {
          background: "var(--n000)"
        } : {
          background: "transparent"
        },
        ref: s,
        id: "search-select",
        value: A,
        inputProps: {
          "aria-label": "Without label"
        },
        onChange: (e) => {
          const r = e.target.value;
          g && g(r);
        },
        onClose: () => {
          S(""), v(!1);
        },
        onOpen: () => v(!0),
        // This prevents rendering empty string in Select's value
        // if search text would exclude currently selected option.
        renderValue: (e) => {
          var r;
          return ((r = o.find((n) => n.value === e)) == null ? void 0 : r.title) ?? "";
        },
        endAdornment: t(h, {
          position: "end",
          children: t(c, {
            color: "--n400",
            type: u.small,
            children: y ? p.caretUp : p.caretDown
          })
        }),
        startAdornment: l && t(h, {
          position: "start",
          children: t(c, {
            color: l.color,
            type: u.small,
            children: l.icon
          })
        }),
        children: [o.length >= O && t("div", {
          className: I("search-bar-container"),
          children: t(M, {
            testId: "search-select-input-search",
            placeholder: a ? `Search ${a}` : "Search",
            textFieldProps: {
              size: "small",
              // Autofocus on textfield
              autoFocus: !0,
              fullWidth: !0,
              InputProps: {
                startAdornment: t(h, {
                  position: "start",
                  children: t(c, {
                    color: "--n400",
                    type: u.small,
                    children: p.search
                  })
                })
              }
            },
            onChange: (e) => {
              S(e.target.value);
            },
            onKeyDown: (e) => {
              e.key !== "Escape" && e.stopPropagation();
            }
          })
        }), E.map((e, r) => t(j, {
          value: e.value,
          children: x("div", {
            children: [t(d, {
              children: e.title
            }), e.description && t(d, {
              type: T.textCaption,
              children: e.description
            })]
          })
        }, r)), o.length >= C && t("div", {
          className: "vanguard-searchable-select-input-menu-list-footer",
          children: t(d, {
            testId: "search-selector-footer-menu",
            type: T.textCaption,
            replacements: {
              count: o.length
            },
            children: a ? `%count% ${a}s` : "%count% elements"
          })
        })]
      })
    })
  });
};
export {
  ee as SearchableSelect
};
