import { j as r } from "../../../_virtual/jsx-runtime.js";
import { useRef as de, useState as o, useEffect as m } from "react";
import { usePopper as me } from "../../../node_modules/react-popper/lib/esm/usePopper.js";
import { useOnClickOutside as xe } from "../../../hooks/useClickOutside.js";
import { useDebounce as je } from "../../../hooks/useDebounce.js";
import { useKeyPress as D } from "../../../hooks/useKeyPress.js";
import we from "../../../icons/AlertCircle.js";
import ge from "../../../icons/Close.js";
import Ce from "../../../icons/Search.js";
import { getId as Ee } from "../../../utils/index.js";
import { OptionsPopper as Oe } from "../dropdown/styles.js";
import { Wrapper as Pe, LabelWrapper as We, Label as Ie, Text as Se, Border as ye, SupportingText as De, ErrorMessage as Le, AssistMessage as ke } from "../styles.js";
import { SearchOptions as Re } from "./components/SearchOptions.js";
import { IconWrapper as be, InputWrapper as Ae, Input as Be, CloseWrapper as Fe } from "./styles.js";
import { popperOptions as Ve } from "./utils.js";
function _e({
  variant: G,
  id: L,
  className: H,
  name: k,
  label: p,
  required: J,
  optionalText: N,
  errorText: R,
  assistText: g,
  value: x,
  placeholder: Q,
  width: X,
  hasError: C = !1,
  options: c,
  debounceDelay: Y = 500,
  noResultsText: Z,
  onChange: b,
  onOpen: A,
  onClose: B,
  onFocus: F,
  onBlur: V,
  onTextChange: v,
  disabled: t = !1,
  maxHeight: _ = 300,
  touched: E,
  ...O
}) {
  var z;
  const a = de(null), [T, ee] = o(
    null
  ), [re, te] = o(null), [oe, ne] = o(0), [j, P] = o(!1), { containerRef: h } = xe(() => P(!1)), [n, d] = o(-1), [s, f] = o(""), [W, M] = o(
    x
  ), [i, w] = o(c), l = je(s, Y), U = D("ArrowDown", a), $ = D("ArrowUp", a), K = D("Enter", a), [I, se] = o(!1);
  m(() => {
    se(typeof E > "u" ? C : C && E);
  }, [C, E]);
  const { styles: ie, attributes: le } = me(
    T,
    re,
    Ve
  ), S = () => {
    t || (P(!0), A && A());
  }, pe = () => {
    t || (P(!1), B && B());
  }, q = (e) => {
    e.label && !e.isDisabled && i.length > 0 && (pe(), f(e.label), M(e), b(e), d(-1));
  }, ce = (e) => {
    j || S();
    const u = e.target.value;
    u === "" && w(c), f(u), v && v(u);
  }, ae = () => {
    !j && s === "" && S(), F && F();
  }, fe = (e) => {
    t || (e.preventDefault(), w(c), f(""), b(null), M(null), S());
  }, ue = () => {
    s !== "" && i.length >= 1 && !W ? f(i[0].label) : W || f(""), V && V();
  }, he = () => s.length > 0 || W !== null;
  m(() => {
    x && f(x.label);
  }, [x]), m(() => {
    h && h.current && ne(h.current.clientWidth);
  }, [(z = h.current) == null ? void 0 : z.clientWidth]), m(() => {
    if (l && l !== "") {
      const e = c.filter((u) => l.length > 1 ? u.label.toLowerCase().includes(l.toLowerCase()) : u.label.toLowerCase().startsWith(l.toLowerCase()));
      w(e), d(0);
    } else
      w(c);
  }, [l, c]), m(() => {
    if (i.length > 0 && (U && n < i.length - 1 && d(n + 1), $ && n >= 1 && d(n - 1), K && n >= 0)) {
      const e = i[n];
      q(e);
    }
  }, [U, $, K]);
  const y = Ee(O["data-testid"]);
  return /* @__PURE__ */ r.jsxs(
    Pe,
    {
      className: H,
      "data-testid": y("searchable-dropdown"),
      "data-trackid": O["data-trackid"],
      "aria-label": O["aria-label"] || p,
      ref: h,
      onClick: () => {
        var e;
        return a && ((e = a.current) == null ? void 0 : e.focus());
      },
      width: X,
      children: [
        /* @__PURE__ */ r.jsxs(We, { disabled: t, hasLabel: !!(p != null && p.length), children: [
          p && /* @__PURE__ */ r.jsx(Ie, { htmlFor: L || `input-${k}`, disabled: t, children: p }),
          !J && /* @__PURE__ */ r.jsx(Se, { children: N })
        ] }),
        /* @__PURE__ */ r.jsxs(
          ye,
          {
            disabled: t,
            hasError: I,
            "aria-haspopup": "true",
            "aria-expanded": j,
            ref: ee,
            children: [
              /* @__PURE__ */ r.jsx(be, { children: /* @__PURE__ */ r.jsx(Ce, { width: 24, height: 24 }) }),
              /* @__PURE__ */ r.jsx(Ae, { children: /* @__PURE__ */ r.jsx(
                Be,
                {
                  id: L || `input-${k}`,
                  ref: a,
                  type: "text",
                  "data-testid": y(),
                  variant: G,
                  disabled: t,
                  placeholder: Q,
                  "aria-haspopup": "true",
                  autoComplete: "off",
                  value: s,
                  onChange: ce,
                  onBlur: ue,
                  onFocus: ae
                }
              ) }),
              he() && /* @__PURE__ */ r.jsx(Fe, { disabled: t, onMouseDown: fe, children: /* @__PURE__ */ r.jsx(ge, { width: 24, height: 24 }) })
            ]
          }
        ),
        j && !t && /* @__PURE__ */ r.jsx(
          Oe,
          {
            role: "listbox",
            "data-testid": y("popper"),
            ref: te,
            width: oe,
            maxHeight: _,
            style: ie.popper,
            ...le.popper,
            children: /* @__PURE__ */ r.jsx(
              Re,
              {
                searchOptions: i,
                noResultsText: Z,
                value: s === "" ? s : l,
                focusElement: n,
                setFocusElement: d,
                onClick: q
              }
            )
          }
        ),
        /* @__PURE__ */ r.jsxs(De, { children: [
          !!R && I && !t && /* @__PURE__ */ r.jsxs(Le, { children: [
            /* @__PURE__ */ r.jsx(we, {}),
            R
          ] }),
          !I && (typeof g == "string" ? /* @__PURE__ */ r.jsx(ke, { children: g }) : g)
        ] })
      ]
    }
  );
}
export {
  _e as SearchableDropdown
};
