import { jsx as a, jsxs as l, Fragment as Q } from "react/jsx-runtime";
import { useState as E, useRef as R, useEffect as b, useLayoutEffect as Y } from "react";
import { isEmpty as _ } from "es-toolkit/compat";
import { noop as D } from "es-toolkit/function";
import h from "../../utils/classNames.js";
import { useDropDirection as Z } from "../../utils/useDropDirection.js";
import { DOWN as w, scrollItemIntoView as T, UP as g } from "../../utils/scrollItemIntoView.js";
import $ from "../../hooks/useKey.js";
import ee from "./DropdownHeader.js";
import te from "./NoItemMessage.js";
import se from "../spinner/Spinner.js";
const B = "data-item-id", re = 0, H = "focus", L = w, Ie = (O) => {
  const {
    isOpen: s = !1,
    isLoading: p = !1,
    updateDOMValues: x = D,
    onOpen: d = D,
    onSelect: u = D,
    onClose: y = D,
    options: n = [],
    autoDropDirection: V = !0,
    dropup: j = !1,
    pullRight: K = !1,
    useActiveClass: G = !1,
    focusedItemIndex: m,
    keyboardUsed: f,
    noItemMessage: P,
    dropdownClassName: W
  } = O, [o, k] = E(m || re), [X, A] = E(f), C = R(L), r = R(null);
  b(() => {
    s && r.current && (r.current.scrollTop = 0);
  }, [s]), b(() => {
    typeof m == "number" && k(m), typeof f == "boolean" && A(f), s || (C.current = L);
  }, [m, f, s]);
  const I = Z({ pullRight: K, dropup: j, autoDropDirection: V, dropdownMenuRef: r }, [s]);
  Y(() => {
    if (r.current) {
      const e = r.current.parentElement;
      I.dropup ? e?.classList.add("dropup") : e?.classList.remove("dropup");
    }
  }, [I, r]), b(() => {
    x(q());
  }, [n]), b(() => {
    s && T(
      C.current || L,
      r.current,
      N()
    );
  }, [o, s]);
  const [v, U] = E(s);
  s && !v ? (d(I.dropup), U(s)) : !s && v && (y(), U(s)), $((e) => {
    if (s)
      switch (e.key) {
        case "Escape": {
          y();
          break;
        }
        case "Tab": {
          y();
          break;
        }
        case "Enter": {
          z(e);
          break;
        }
        case "ArrowUp": {
          e.preventDefault(), S(g), T(g, r.current, N());
          break;
        }
        case "ArrowDown": {
          e.preventDefault(), S(w), T(w, r.current, N());
          break;
        }
      }
  });
  const S = (e) => {
    let t = 0;
    switch (e) {
      case g: {
        t = o <= 0 ? o : o - 1;
        break;
      }
      case w: {
        t = o === n.length - 1 ? o : o + 1;
        break;
      }
    }
    C.current = e;
    const c = e === g ? n.length - 1 : 0;
    k(t < 0 ? c : t), A(!0);
  }, F = () => r.current?.getElementsByTagName("a") || [], q = () => {
    if (r.current)
      return [...F()].map(
        (t) => ({
          id: t.getAttribute(B),
          text: t.textContent
        })
      );
  }, N = () => [...F()].find((t) => t.className.includes(H)), z = (e) => {
    if (e.preventDefault(), _(n))
      return;
    const t = N();
    if (t) {
      const c = n.find((i) => i.id === t.getAttribute(B));
      u(c);
    }
  }, J = (e) => {
    e.preventDefault();
    const t = e.currentTarget.getElementsByTagName("input")[0].value, c = n.find((i) => i.id === t);
    u(c);
  }, M = h("dropdown-menu", I.pullRight && "pull-right", W);
  return _(n) ? /* @__PURE__ */ a(te, { noItemMessage: P, className: M }) : /* @__PURE__ */ l("ul", { className: M, ref: r, role: "menu", children: [
    p && /* @__PURE__ */ a("div", { className: "display-flex justify-content-center padding-10", children: /* @__PURE__ */ a(se, {}) }),
    !p && n.map((e, t) => {
      if (e.header)
        return /* @__PURE__ */ a(ee, { icon: e.icon, label: e.label }, e.id);
      const c = h(
        X && o === t ? H : "",
        e.disabled && "pointer-events-none",
        "display-flex align-items-center gap-3",
        e.dropdownItemClassName
      ), i = h(
        e.disabled && "disabled",
        G && e.selected && "active"
      );
      return /* @__PURE__ */ a("li", { className: i, role: "listitem", children: /* @__PURE__ */ l(
        "a",
        {
          role: "menuitem",
          className: c,
          "data-item-id": e.id,
          "data-item-index": t,
          onClick: e.disabled ? void 0 : J,
          children: [
            /* @__PURE__ */ l(
              "span",
              {
                className: h(
                  "selected-option-dropdown-item",
                  e.description && "selected-option-dropdown-item-with-description"
                ),
                children: [
                  e.icon && /* @__PURE__ */ a(Q, { children: e.icon }),
                  e.description ? /* @__PURE__ */ l("span", { className: "selected-option-dropdown-text", children: [
                    /* @__PURE__ */ a("span", { className: "selected-option-dropdown-label", children: e.label }),
                    /* @__PURE__ */ l("span", { className: "selected-option-dropdown-description", children: [
                      " ",
                      e.description
                    ] })
                  ] }) : e.label
                ]
              }
            ),
            /* @__PURE__ */ a("input", { type: "hidden", value: e.id })
          ]
        }
      ) }, e.id);
    })
  ] });
}, Ne = (O, s, p) => {
  const x = O.filter((d) => d.text.toLowerCase().includes(s.toLowerCase()));
  return p.filter((d) => x.find((u) => u.id === d.id));
};
export {
  Ie as default,
  Ne as filterOptions
};
//# sourceMappingURL=BaseSelectDropdown.js.map
