import { jsxs as _, jsx as d } from "react/jsx-runtime";
import { useState as h, useRef as E, useEffect as F } from "react";
import { isEmpty as ge } from "es-toolkit/compat";
import { noop as a } from "es-toolkit/function";
import { isNil as fe } from "es-toolkit/predicate";
import j from "../../utils/classNames.js";
import he from "../clearableInput/ClearableInput.js";
import { DOWN as B, scrollItemIntoView as Se, UP as Ie } from "../../utils/scrollItemIntoView.js";
import { useDropDirection as be } from "../../utils/useDropDirection.js";
import we from "../selects/DropdownHeader.js";
import Ne from "../menuItems/MenuItem.js";
import ve from "../../hooks/useClickOutside.js";
import Ce from "./AutoSuggestAddons.js";
import De from "./DropdownSpinner.js";
import ye from "./NoItemMessage.js";
const Ue = (U) => {
  const {
    id: M,
    onSuggestionSelected: q = a,
    onSuggestionsFetchRequested: S = a,
    onSuggestionHighlighted: L = a,
    renderSuggestion: I,
    customSuggestionKey: b,
    getSuggestionValue: x,
    suggestions: t = [],
    autoDropDirection: W = !0,
    pullRight: $ = !1,
    dropup: z = !1,
    isLoading: G = !1,
    openOnFocus: J = !1,
    closeOnSelect: Q = !0,
    showSelectedItemsInInput: X = !0,
    autoComplete: Y = "off",
    inputProps: r = {
      id: M,
      disabled: !1,
      onChange: a,
      onClear: a,
      onBlur: a,
      onFocus: a,
      placeholder: "Start typing",
      hasError: !1,
      tabIndex: 0,
      value: void 0,
      icon: void 0
    },
    leadingInputAddons: A,
    trailingInputAddons: R,
    noItemMessage: w,
    dropdownClassName: Z = "",
    className: ee = "",
    ...oe
  } = U, [l, N] = h(!1), [p, v] = h(r.value || ""), [u, m] = h(-1), [V, k] = h(B), ne = ve(() => P()), g = E(null), C = E(null), O = E([]), D = r.value;
  !fe(D) && p !== D && v(D ?? ""), F(() => S({ value: p }), []), F(() => {
    const e = se();
    Se(V, g.current, e);
  }, [u, V]), F(() => {
    const e = Array.from(g.current?.getElementsByTagName("li") || []);
    O.current = e;
  }, [t]);
  const H = be({ pullRight: $, dropup: z, autoDropDirection: W, dropdownMenuRef: g }, [t]), y = () => {
    l || N(!0);
  }, P = () => {
    N(!1);
  }, te = (e) => {
    J && y(), r.onFocus && r.onFocus();
  }, re = (e) => {
    switch (e.key) {
      case "ArrowDown": {
        const o = u + 1;
        l && t.length > o && (m(o), f(Number(o)), k(B));
        return;
      }
      case "ArrowUp":
        if (l && u > 0) {
          const o = u - 1;
          m(o), f(Number(o)), k(Ie);
        }
        return;
      case "Enter":
        l && t[u] ? T(e, t[u]) : y();
        break;
      case "Escape":
      case "Tab":
        P();
        break;
    }
  }, se = () => [...O.current].find((e) => e.className.includes("active")), le = (e, o) => {
    p !== e && K(e, o);
  }, K = (e, o, n = !1) => {
    N(l ? n ? !1 : l : !0), v(e), m(-1), S({ value: e }), f(-1);
    const { value: i, onChange: c = () => {
    } } = r;
    e !== i && c(o, { newValue: e });
  }, f = (e) => {
    const o = e === -1 ? null : t[e];
    L(o);
  }, ue = (e) => {
    v(""), m(-1), C.current && C.current.focus(), S({ value: "" }), f(-1), r.onClear && r.onClear();
  }, ae = (e) => e.label ?? e[b ?? ""] ?? "", T = (e, o) => {
    const s = (x || ae)(o);
    K(s, e, Q), q(e, {
      suggestion: o,
      suggestionValue: s
    });
  }, ie = () => {
    const { id: e, icon: o, value: n, ...s } = r, i = { id: M ?? e, ...s }, c = /* @__PURE__ */ d(
      he,
      {
        ...i,
        ref: C,
        autoComplete: Y,
        onChange: le,
        onClear: ue,
        onFocus: te,
        onClick: y,
        value: X ? p : ""
      }
    );
    return o || A || R ? /* @__PURE__ */ d(
      Ce,
      {
        icon: o,
        leadingInputAddons: A,
        trailingInputAddons: R,
        children: c
      }
    ) : c;
  }, ce = (e) => e.label, de = () => {
    const e = j(
      "dropdown-menu",
      H.pullRight && "pull-right",
      Z
    );
    if (G)
      return /* @__PURE__ */ d(De, { className: e });
    const o = ge(t);
    return o && !w ? null : /* @__PURE__ */ _("ul", { role: "menu", className: e, ref: g, children: [
      o && w && /* @__PURE__ */ d(ye, { message: w }, "NoItemMessage"),
      t.map((n, s) => {
        if (I && !n.label && !b)
          throw new Error(
            'The "customSuggestionKey" need to be set when using a custom renderer and not using the "label" prop for suggestions'
          );
        const i = `index-${n.label ?? n[b ?? ""]}`;
        if (n.header && n.label)
          return /* @__PURE__ */ d(we, { label: n.label }, i);
        const c = I || ce;
        return /* @__PURE__ */ d(
          Ne,
          {
            active: s === u,
            disabled: n.disabled,
            value: n.customSuggestion ? n.customSuggestion : c(n),
            onSelect: (Ee, me) => T(me, n),
            index: s
          },
          i
        );
      })
    ] });
  }, pe = j(
    "AutoSuggest",
    "dropdown",
    l && "open",
    H.dropup && "dropup",
    ee
  );
  return /* @__PURE__ */ _("div", { ...oe, className: pe, onKeyDown: re, ref: ne, children: [
    ie(),
    de()
  ] });
};
export {
  Ue as AutoSuggest,
  Ue as default
};
//# sourceMappingURL=AutoSuggest.js.map
