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