import { jsxs as N, jsx as a } from "react/jsx-runtime";
import { useState as n, useRef as T } from "react";
import { isEqual as y } from "es-toolkit/predicate";
import { isEmpty as Te } from "es-toolkit/compat";
import { noop as ye } from "es-toolkit/function";
import G from "../../utils/classNames.js";
import Re, { filterOptions as ke } from "./BaseSelectDropdown.js";
import Ee from "./ClearButton.js";
import Pe from "./MultiselectToggleCounter.js";
import _e from "./MultiselectToggleSelection.js";
import Ke from "./MultiselectToggleFilter.js";
import Ue from "./MultiselectTogglePlaceholder.js";
import Be from "../../hooks/useClickOutside.js";
import Ve from "../../hooks/useMergeRefs.js";
import We from "./WithFeedbackAndAddon.js";
const I = -1, ot = (H) => {
  const {
    name: R,
    id: J = R,
    options: o = [],
    value: i,
    onChange: S = ye,
    placeholder: Q,
    isLoading: Y = !1,
    dropup: Z = !1,
    pullRight: $ = !1,
    autoDropDirection: ee = !0,
    bsSize: w = "md",
    variant: te = "default",
    disabled: k = !1,
    tabIndex: se = 0,
    hasError: oe = !1,
    useFilter: E = !1,
    useClear: ne = !1,
    multiline: g = !1,
    noItemMessage: re,
    counterMessage: C,
    renderCounterMessage: F,
    showSelectedItemIcon: le = !1,
    showUnselectedItemIcons: P = !1,
    className: _,
    inputAddon: b,
    errorMessage: K,
    warningMessage: U,
    messageWhiteSpace: ae = "normal",
    btnClassName: B,
    dropdownClassName: ie,
    ...ce
  } = H, [l, M] = n(!1), [r, u] = n(i || []), [v, f] = n(!1), [O, p] = n(""), [de, d] = n(o), [V, ue] = n([]), [fe, h] = n(I), [pe, m] = n(!1), W = T(null), x = T(null), me = Be((e) => {
    x.current && !x.current.contains(e.target) && z();
  }), ge = Ve(x, me), D = (e, t) => {
    if (t)
      u(t);
    else if (e) {
      const s = e.filter((c) => c.selected);
      u(s.map((c) => c.id));
    }
  }, j = T(!0);
  j.current && (D(o, i), j.current = !1);
  const [he, Ie] = n(i);
  y(i, he) || (D(o, i), Ie(i));
  const [Se, we] = n(o);
  y(o, Se) || (D(o, i), d(o), we(o));
  const Ce = (e = []) => {
    !e.length || (v || O) && V.length > 0 || ue(
      (s) => y(s, e) ? s : e
    );
  }, L = () => /* @__PURE__ */ a(
    Ke,
    {
      isActive: v || !!O,
      selectedItemIds: r,
      filterValue: O,
      onFilterChange: ve
    }
  ), Fe = () => C || F ? /* @__PURE__ */ a(
    Pe,
    {
      selectedAmount: r.length,
      counterMessage: C,
      customRenderer: F
    }
  ) : /* @__PURE__ */ a(
    _e,
    {
      options: o,
      selectedItemIds: r,
      showSelectedItemIcon: le,
      showUnselectedItemIcons: P,
      onRemoveItem: xe,
      multiline: g,
      hasInputAddon: !!b,
      hasFilter: E,
      children: g && L()
    }
  ), be = () => {
    const e = G(
      "dropdown-toggle",
      "form-control",
      "text-left",
      B && B,
      w === "sm" && "input-sm",
      w === "lg" && "input-lg",
      g && "height-auto",
      k && "disabled"
    ), t = Te(r) && !P, s = E && l && !C && !F, c = r.length > 0 ? { id: "__multiselect-clear__", label: "" } : null, X = /* @__PURE__ */ N(
      "button",
      {
        type: "button",
        id: J,
        name: R,
        className: e,
        "data-toggle": "dropdown",
        tabIndex: se,
        "aria-haspopup": "true",
        "aria-expanded": l,
        onClick: A,
        onKeyDown: Ae,
        ref: W,
        children: [
          t ? /* @__PURE__ */ a(Ue, { placeholder: Q }) : Fe(),
          s && !g && L(),
          /* @__PURE__ */ N("span", { className: "select-toggle-actions", children: [
            /* @__PURE__ */ a(
              Ee,
              {
                showClear: ne,
                selectedItem: c,
                onClear: De
              }
            ),
            /* @__PURE__ */ a("span", { className: "caret" })
          ] })
        ]
      }
    );
    return !b && !K && !U ? X : /* @__PURE__ */ a(
      We,
      {
        bsSize: w,
        inputAddon: b,
        errorMessage: K,
        warningMessage: U,
        messageWhiteSpace: ae,
        children: X
      }
    );
  }, Me = () => {
    const e = de.map((t) => (t.selected = r.indexOf(t.id) !== -1, t));
    return /* @__PURE__ */ a(
      Re,
      {
        isOpen: l,
        isLoading: Y,
        options: e,
        focusedItemIndex: fe,
        keyboardUsed: pe,
        updateDOMValues: Ce,
        onSelect: Oe,
        onClose: z,
        noItemMessage: re,
        pullRight: $,
        useActiveClass: !0,
        dropup: Z,
        autoDropDirection: ee,
        dropdownClassName: ie
      }
    );
  }, ve = (e) => {
    e.preventDefault();
    const t = e.currentTarget.value;
    if (t === "") {
      f(!1), p(""), d(o), m(!1), h(I);
      return;
    }
    const s = ke(V, t, o);
    l || M(!0);
    const c = s.length > 0 ? 0 : -1;
    f(!0), p(t), d(s), s.length > 0 && m(!0), h(c);
  }, Oe = (e) => {
    if (e?.disabled)
      return;
    const t = e ? q(e.id) : r;
    u(t), f(!1), p(""), d(o), S(t);
  }, q = (e) => {
    const t = [...r], s = r.indexOf(e);
    return s !== -1 ? t.splice(s, 1) : t.push(e), t;
  }, xe = (e, t) => {
    e.stopPropagation();
    const s = q(t);
    u(s), S(s);
  }, De = () => {
    u([]), f(!1), p(""), d(o), m(!1), h(I), S([]);
  }, Ae = (e) => {
    switch (e.key) {
      case "Space":
        l || (e.preventDefault(), A(e));
        break;
      case "Enter":
        l || (e.preventDefault(), A(e));
        break;
    }
  }, A = (e) => {
    if (k || v)
      return;
    const t = e.detail === 0;
    M((s) => !s), m(t);
  }, z = () => {
    l && (M(!1), f(!1), p(""), d(o), h(I), m(!1), W?.current?.focus());
  }, Ne = G(
    "select",
    "multiselect",
    "dropdown",
    l && "open",
    oe && "has-error",
    te === "blank" && "select-blank",
    _ && _
  );
  return /* @__PURE__ */ N("div", { ...ce, className: Ne, ref: ge, children: [
    be(),
    Me()
  ] });
};
export {
  ot as default
};
//# sourceMappingURL=Multiselect.js.map
